Bootstrap - obrazek na obrazku - dziwne zachowanie

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.