Wordprss 4. Проблемы с CSS. Как решить?

Question

[Виталий Чесноков]

Доброго дня.
Имеется hover-эффект для картинок - пример
Но на сайтах, на которых подключаю его (страница-1 и страница-2), данный эффект работает некорректно. Что не так? Как поправить?
Буду крайне признателен за помощь.

Answer 1

[Андрей Б.]

Для figure добавьте

position: relative;
  overflow: hidden;
  width: 350px;

Comments

[Андрей Б.]

лучше не width а max-width, так как у вас сайт адаптивный

[Виталий Чесноков]

Спасибо, Андрей, за ответ. Подскажите, пожалуйста, а куда это вставить необходимо?

[Андрей Б.]

Я же написал, для figure.

[Андрей Б.]

Только задайте для figure класс и уже в его используйте.

[Виталий Чесноков]

Андрей Б.: там figure повторяется несколько раз. В какой момент необходимо вставить эти строки?
Вот сам код:
HOVER Effects-5

figure {
width: 350px;
height: 240px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: left;
box-shadow: 1px 1px 3px #ccc;
border: 4px solid #fff;
cursor: default;
font:normal 11px/15px Helvetica, Arial, sans-serif;
}

figure figcaption,
figure figcaption img{
width: 350px;
height: 240px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #eee;

-moz-transform: translateX(-350px);
-o-transform: translateX(-350px);
-webkit-transform: translateX(-350px);
transform: translateX(-350px);

visibility:hidden;

-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;
}

figure h2 {
text-transform: uppercase;
color: #333;
position: relative;
font-size: 17px;
letter-spacing: 1px;
margin: 20px 0 0 20px;
}

figure p {
font-size: 12px;
line-height: 17px;
position: relative;
color: #333;
margin: 10px 0 10px 20px;
width:310px;

-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;
}

figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 0 10px 20px;
}

figure a:hover {
color: #E88F00;
border-bottom: 1px dotted #9F1D35;
}

figure:hover figcaption,
figure:hover figcaption img{
-moz-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility:visible;
}

figure:hover img {
-moz-transform: translateX(350px);
-o-transform: translateX(350px);
-webkit-transform: translateX(350px);
transform: translateX(350px);
}

figure:hover p{
opacity: 1;
}

[Андрей Б.]

Еще раз повторяю, для figure.

[Андрей Б.]

вы уже вставили. только вместо width напишите max-width, иначе блок не будет сжиматься.

[Виталий Чесноков]

Да, вставил. Спасибо, Андрей. Но результат не изменился.Увы.

[Андрей Б.]

Значит что-то не так делаете, у меня все работает. И изменения на сайте я не вижу. Может кеш?

[Виталий Чесноков]

Андрей, если не трудно, можете вставить сюда весь изменённый CSS?

[Андрей Б.]

Нет, не могу. Зачем засорять комменты полотном кода? Покапался, у вас ошибка в том что вы используете новый элемент из HTML5, при этом у вас доктайп старый. Так везде замените figure на div, только повторюсь задайте какой-нибудь класс для figure и уже ему прописывайте стили в CSS.

[Андрей Б.]

Да и про figcaption забыл, тоже замените на div, например с класом img-caption.

[Андрей Б.]

и лучше подключайте файл стилей через link а не import

[Виталий Чесноков]

Увы, Андрей. К сожалению, я ничего не понимаю из того, что вы написали. Заменить figure на div - не составило труда, но вот:
доктайп
задайте какой-нибудь класс для figure
уже ему прописывайте стили в CSS
например с класом img-caption
- Это всё для меня, как на иностранном языке. Собственно, так оно и есть.
Кстати, изменения произвожу на: da-style.ru

[Виталий Чесноков]

Ну, вот, пока писал вам ответ, вы дали мне ещё порцию "непонимания":
и лучше подключайте файл стилей через link а не import.

[Виталий Чесноков]

Андрей, сколько будет стоить, если вы дадите мне верные коды и скажете, куда их вставить? Ну правда, я только так понимаю.

[Андрей Б.]

Первое.
В html в head у вас прописано

<style type="text/css" media="screen">
		@import url( http://www.da-style.ru/wp-content/themes/classic/style.css );
	</style>

Замените на

<link rel="stylesheet" href="http://www.da-style.ru/wp-content/themes/classic/style.css" type="text/css" media="all">

Второе

<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.

[Андрей Б.]

Вот вам готовый пример jsfiddle.net/v7mr4b4c/1

[Виталий Чесноков]

Похоже, у меня руки и глаза не из того места растут. Уже просто скопировал, что вы дали и вставил. В "хэде" тоже поправил. Увы, результат прежний.

[littleguga]

MagnuMphoto: доктайп это -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[littleguga]

MagnuMphoto: добавить класс - <div class="figure img-caption"

[littleguga]

Андрей Б.: он и так вроде link'ом, нет?

[Виталий Чесноков]

littleguga: спасибо. Да, встречал эти "буквы". А на что их заменить?

[littleguga]

MagnuMphoto: tanalin.com/blog/2011/04/html5-doctype
У Вас же WP - как заменить доктайп в wp - прогуглите.

[Андрей Б.]

MagnuMphoto уже извините, но если вы даже скопипастить не можете, я тут ничем не помогу.

[Виталий Чесноков]

Андрей Б.: В том то и суть - скопировал, вставил. Результата нет.

[Андрей Б.]

из приведенного мной примера, копируете html, вставляете вместо вашего, копируете css и вставляете в ваш файл стилей, вместо того что вы написали.

[Андрей Б.]

MagnuMphoto все сделали правильно, значит теперь проблема в другом, попробуйте кеш почистить, в wp вроде есть такая возможность

[Андрей Б.]

ошибка в синтаксисе, удалите строчку HOVER Effects-5, или заключите её в комментарий

[Виталий Чесноков]

Андрей Б.: Вот ведь ЁКЛМН!!! СПАСИБО, Андрей!!! Может, всё дело было в этой строке?

[Андрей Б.]

не только в ней

[Виталий Чесноков]

Ещё раз спасибо, Андрей. На втором сайте тоже заработало. Вставил только CSS и HTML. В хэдере ничего не менял.

[Андрей Б.]

пожалуйста