Buenas a todos, llevo desde la mañana intentando buscar una solucion para mi caso.
Lo que no me va, es este codigo css (quiero que cuando pase el raton por encima de la imagen el contenido de abajo (#content1) tenga opacidad 100%)
".tam1:hover+div#content1{
opacity:1;
}"
Código:
img[class*=tam] {
width:165px;
margin-right:62px;
}
#cont img {
cursor:pointer;
opacity:0.7;
-webkit-transition:opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
}
#cont img:hover {
cursor:pointer;
opacity:1;
-webkit-transition:opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
}
#content1 {
position:absolute;
width:960px;
height:332px;
opacity:0;
bottom:150px;
background-color:#FFF;
right:48px;
top:118px;
z-index:1;
}
.tam1:hover+div#content1{
opacity:1;
}
codigo html
Código:
<div id="cont">
<img class="tam1" src="img/boton1.png">
<img class="tam2" src="img/boton2.png">
<img class="tam3" src="img/boton3.png">
<img class="tam4" src="img/boton4.png">
<div id="content1"></div>
</div>