отображение текста на ховере

[mrfrunze]

добрый вечер, при наведении на картинку посредине картинки должен появиться текст.

изначально задаю display:none;

при наведении

:hover{

display:block;

}

 

текст не отображается.

вот ссылочка http://jsfiddle.net/mrfrunze/wg8ntajy/

 

в чем может быть подвох? спасибо. 
 

[Galaxy]

Не совсем понятно что куда наводить но предположу то что вы хотите ховерить display none, а так не делается ) надо делать при ховере на родитель  нужному дочернему display :block

[mrfrunze]

Не совсем понятно что куда наводить но предположу то что вы хотите ховерить display none, а так не делается ) надо делать при ховере на родитель  нужному дочернему display :block

это галерея, при наведении на картинку картинка становиться прозрачнее opasity:0/4; и должен появиться текст описания картинки.  Я не совсем понял, кому задавать ховер. , если изначально это span и ему я задал  display none, а на ховере display :block

 

<h2>Галерея</h2>				<ul>					<li><a href="#"><span class="desc">комната</span><img src="images/bedroom.png" alt="alt"/></a></li>					<li><a href="#"><img src="images/mess_room.png" alt="alt"/></a></li>					<li><a href="#"><img src="images/bathroom.png" alt="alt"/></a></li>					<li><a href="#"><img src="images/drawing_room.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/dining_room.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/bedroom_2.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/bilayrd.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/spa.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/dining_caffe.png" alt="alt" /></a></li>				</ul>

Edited August 16, 2014 by mrfrunze

[Galaxy]

Картинки битые какие то , но вы поймите что если у элемента display none то вы на него не можете навести.

[mrfrunze]

 

Не совсем понятно что куда наводить но предположу то что вы хотите ховерить display none, а так не делается ) надо делать при ховере на родитель  нужному дочернему display :block

это галерея, при наведении на картинку картинка становиться прозрачнее opasity:0/4; и должен появиться текст описания картинки.  Я не совсем понял, кому задавать ховер. , если изначально это span и ему я задал  display none, а на ховере display :block

 

<h2>Галерея</h2>				<ul>					<li><a href="#"><span class="desc">комната</span><img src="images/bedroom.png" alt="alt"/></a></li>					<li><a href="#"><img src="images/mess_room.png" alt="alt"/></a></li>					<li><a href="#"><img src="images/bathroom.png" alt="alt"/></a></li>					<li><a href="#"><img src="images/drawing_room.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/dining_room.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/bedroom_2.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/bilayrd.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/spa.png" alt="alt" /></a></li>					<li><a href="#"><img src="images/dining_caffe.png" alt="alt" /></a></li>				</ul>

.gallery .desc{	display:none;}.desc:hover{	display:block;	position:relative;	font:12px "Verdana";	color:#fff;}

[Galaxy]

думайте в направлении 

.gallery:hover .desc{

display:block;

position:relative;

font:12px "Verdana";

color:#fff;

}

 

[mrfrunze]

 

думайте в направлении 

.gallery:hover .desc{

display:block;

position:relative;

font:12px "Verdana";

color:#fff;

}

 

 

да это работает, но мне надо чтоб текст выводился только при наведении на картинку +  у каждой картинки свое описание. Если как вы рекомендуете, то при наведении на блок gallery у меня уже появляется текст. не совсем то что мне нужно. код теперь то хоть понятен?

[Galaxy]

значит надо менять структуру, или js'ом делать.

Edited August 17, 2014 by Galaxy

[mrfrunze]

может при помощи css 3 возможно, должен же быть способ обойтись без  js  ?