Верстка при наведении на блок

[gameviktor]

Здравствуйте, столкнулся с такой задачей:

до наведения курсора http://joxi.ru/wYSTU_3JTJA9Y33ZX5U
после наведения курсора http://joxi.ru/-4OTU_3JTJA1Y21ipcQ

не могу придумать как это реализовать. а именно чтобы была внутри граница прозрачная и при этом поддерживал ie8.

[swandev]

a .content {   display: none;}a:hover:before {  content: "";  position: absolute;  width: 100%;  height: 100%;  border: 5px solid #color;  opacity: .5;  //фильтры для ие нагуглите}a:hover:after {  content: "";  position: absolute;  top: 7px //5px - первая рамка + 2px отступ  background: #color;  opacity: .5;  //фильтры для ие нагуглите}a:hover .content {  display: block;}

Примерно так

html Разметка будет такой

 <div class="image">  <a href="#">    <img src="" alt="">    <div class="content">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia molestias.    </div>  </a></div>

[gameviktor]

a .content {   display: none;}a:hover:before {  content: "";  position: absolute;  width: 100%;  height: 100%;  border: 5px solid #color;  opacity: .5;  //фильтры для ие нагуглите}a:hover:after {  content: "";  position: absolute;  top: 7px //5px - первая рамка + 2px отступ  background: #color;  opacity: .5;  //фильтры для ие нагуглите}a:hover .content {  display: block;}

Примерно так

html Разметка будет такой

 <div class="image">  <a href="#">    <img src="" alt="">    <div class="content">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia molestias.    </div>  </a></div>

что-то не получается))

[npofopr]

Ищите примерно по таким заголовкам, или на том сайте посмотрите, там куча таких примеров

http://tympanus.net/Tutorials/CaptionHoverEffects/index.html

[swandev]

a .content {   display: none;}a:hover:before {  content: "";  position: absolute;  width: 100%;  height: 100%;  border: 5px solid #color;  opacity: .5;  //фильтры для ие нагуглите}a:hover:after {  content: "";  position: absolute;  top: 7px //5px - первая рамка + 2px отступ  background: #color;  opacity: .5;  //фильтры для ие нагуглите}a:hover .content {  display: block;}

Примерно так

html Разметка будет такой

<div class="image">  <a href="#">    <img src="" alt="">    <div class="content">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia molestias.    </div>  </a></div>

что-то не получается))

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