Динамическое лого при наведении

Хочу сделать динамическое лого, сайт на вордпресс. Вставил код, вроде все работает, но только если я удаляю одну строку в php. Эта строчка не дает изменится логотипу, когда наводишь курсор, я далеко от сайтостроения, но она накладывает слой css поверху, тем самым дает блокировку на скачку логотипа, прошу разъяснений, и если это так, то как мне оставить эту функцию, но чтобы она не блочила динамику лого

Код динамического лого

<div id="cf">

  <img class="bottom" src="image/image1.php" />

  <img class="top" src="image/image2.php" />

</div>

CSS

#cf {

  position:relative;

  height:281px;

  width:450px;

  margin:0 auto;

}



#cf img {

  position:absolute;

  left:0;

  -webkit-transition: opacity 0.5s ease-in-out;

  -moz-transition: opacity 0.5s ease-in-out;

  -o-transition: opacity 0.5s ease-in-out;

  transition: opacity 0.5s ease-in-out;

}



#cf img.top:hover {

  opacity:0;

}

А вот эта строчка:

<div class="cover"></div>

и его CSS

.cover {

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

}



.cover.shade-light { background: rgba(0,0,0,0.25); }

.cover.shade-medium { background: rgba(0,0,0,0.5); }

.cover.shade-dark { background: rgba(0,0,0,0.75); }