Estoy armando una galería con imágenes donde la imagen tiene un efecto de hover
al pasar el mouse por encima, además del texto en el hover quisiera que aparezca un bordeado a la derecha y abajo del texto, osea right
y bottom
, como en la siguiente imagen:
/* Prevent vertical gaps */
line-height: 0;
margin-left:150px;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
-moz-column-count: 2;
-moz-column-gap: 0px;
column-count: 2;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
a.darken {
display: inline-block;
background: black;
padding: 0;
position:relative;
}
a.darken img {
display: block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
a.darken:hover img {
opacity: 0.3;
}
a.darken span{
visibility:hidden;
font-size:16px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-height: 100%;
}
a.darken:hover span{color:#fff; visibility:visible;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
<section id="photos">
<a href="/portfolio/test1.shtml" class="darken"><img src="http://i.imgur.com/cFUOEtW.jpg"><span>GALLERY ONE</span></a>
<a href="/portfolio/test2.shtml" class="darken"><img src="http://i.imgur.com/cFUOEtW.jpg"><span>GALLERY TWO</span></a>
<a href="/portfolio/test3.shtml" class="darken"><img src="http://i.imgur.com/cFUOEtW.jpg"><span>GALLERY THREE</span></a>
<a href="/portfolio/test4.shtml" class="darken"><img src="http://i.imgur.com/cFUOEtW.jpg"><span>GALLERT FOUR</span></a>
</section>