Mam problem. Zrobiłem w CSS obrazek wyświetlany na obrazku po najechaniu myszką (hover), ale jak wrzucam to do klasy "row" to nagle mechanizm przestaje działać, a raczej zachowuje się dziwnie. Oto kod:
<div class='row'>
<div class='col-lg-6'>
<div class="card">
<div class="dd">
<img class='obrazek2 responsive' src="image1.png"/>
</div>
<img class='obrazek responsive' src="image1.png"/>
</div>
</div>
</div>
.card
{
max-height:300px;
max-width:475px;
cursor:pointer;
}
.dd
{
max-height:300px;
max-width:475px;
margin-top:auto;
opacity:0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
position:absolute;
}
.card:hover > .dd
{
opacity: 1;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.obrazek
{
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.obrazek:hover
{
zoom: 1;
filter: alpha(opacity=50);
opacity: 0;
}
img.obrazek,.obrazek2
{
max-height:300px;
}
Trochę syf, bo próbuję różne kombinacje i już mnie szlag trafia. Mógłby ktoś spojrzeć na kod i rzucić radą? Albo podesłać jakiś wypróbowany kod.