Доброго дня.
Имеется hover-эффект для картинок - пример
Но на сайтах, на которых подключаю его (страница-1 и страница-2), данный эффект работает некорректно. Что не так? Как поправить?
Буду крайне признателен за помощь.
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
figure img {
display: block;
position: relative;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
-webkit-transition: all 0.4 ease-out;
-moz-transition: all 0.4 ease-out;
-ms-transition: all 0.4 ease-out;
-o-transition: all 0.4 ease-out;
transition: all 0.4 ease-out;
}
Нет, не могу. Зачем засорять комменты полотном кода? Покапался, у вас ошибка в том что вы используете новый элемент из HTML5, при этом у вас доктайп старый. Так везде замените figure на div, только повторюсь задайте какой-нибудь класс для figure и уже ему прописывайте стили в CSS.
Увы, Андрей. К сожалению, я ничего не понимаю из того, что вы написали. Заменить figure на div - не составило труда, но вот:
доктайп
задайте какой-нибудь класс для figure
уже ему прописывайте стили в CSS
например с класом img-caption
- Это всё для меня, как на иностранном языке. Собственно, так оно и есть.
Кстати, изменения произвожу на: da-style.ru
<div class="img-hover">
<img src="http://dbmast.ru/wp-content/uploads/2014/01/dbmast2.jpg"><br>
<div class="img-caption">
<h2>Заголовок</h2>
<p>Пример создания визуального эффкта выскальзывающей подписи к изображениям с применением только CSS3.</p>
<p>Здесь можете разместить например, краткое описание товара, анонс статьи или представление работ портфолио</p>
<p>Всё что угодно, в зависимости от размера миниатюры и вашей неуёмной фантазии.</p>
<p><a href="#">Ссылка »</a></p>
</div>
</div>
Третье
В CSS везде где написано figure меняете на .img-hover, именно с точкой впереди, а figcaption на .img-hover.
