Вывод заголовков изображений при наведении мышкиHTML <div class="imgteaser"> <a href="#"> <img src="Daim1.jpg" alt="Daim Graffiti" /> <span class="more">» Подробнее</span> <span class="desc"> <strong>DAIM 2002</strong> Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
</a> </div>
CSS
.imgteaser { margin: 0; overflow: hidden; float: left; position: relative; } .imgteaser a { text-decoration: none; float: left; } .imgteaser a:hover { cursor: pointer; }
эффект двойной границы для рисунка
.imgteaser a img { float: left; margin: 0; border: none; padding: 10px; background: #fff; border: 1px solid #ddd; }
кнопка "Подробнее" и вывод заголовка
.imgteaser a .more { position: absolute; right: 20px; bottom: 20px; font-size: 1.2em; color: #fff; background: #000; padding: 5px 10px; filter:alpha(opacity=65); opacity:.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/ } .imgteaser a:hover .desc{ display: block; font-size: 1.2em; padding: 10px 0; background: #111; filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/ color: #fff; position: absolute; bottom: 11px; left: 11px; padding: 10px; margin: 0; width: 566px; border-top: 1px solid #999; } .imgteaser a:hover .desc strong { display: block; margin-bottom: 5px; font-size:1.5em; }
IE6 не прячет кнопку при использовании display: none;, но visibility:hidden; работает отлично.
.imgteaser a .desc { display: none; } .imgteaser a:hover .more { visibility: hidden;}
|