Hover

by a1ex

HTML

<div class="block_img">
    <a href="http://otvet.mail.ru/question/68864013/"><img src="http://avt.foto.mail.ru/bk/ae_design/_avatar" alt="Hover effect" /></a>
    <p>Содержимое блока</p>
    <p><a href="http://otvet.mail.ru/question/68864013/"><img src="http://avt.foto.mail.ru/bk/ae_design/_avatar" alt="Hover effect" /></a></p>
     <p>Скрыта только первая картинка в блоке, остальные будут видны.</p>
</div>

CSS

body { font:15px/1.5em Arial, Helvetica, sans-serif; }
.block_img { 
    width:80%;
    margin:50px auto;
    padding:20px;
    position:relative;
    background:#B7F5FF;
    border:1px solid #7EC1CC;
    border-radius:10px;
}
.block_img > a:first-child { 
    display:none;
    position:absolute;
    z-index:1;
    right:20px;
    line-height:0;
    padding:10px;
    background:#fff;
    border:1px solid #7EC1CC;
    border-radius:3px;
    box-shadow:2px 2px 10px rgba(28,59,63,.4);
}
.block_img:hover > a:first-child {
    display:block;
}
p { margin:0.3em 0 0.5em; }