effect hover in image

Question

effect hover in image

Navigation

#1 by (4 votes)

0

I am building a gallery with images where the image has an effect of hover when hovering over the mouse, in addition to the text in the hover I would like to see a bordering to the right and below the text, that is right and bottom , as in the following image:

   /* 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>

javascript html css bootstrap

asked by MarianoF 28.11.2017 в 13:24

source

1 answer

Center a div / with image / in CSS Pass an object type ArrayList to another Activity or Activity in Android [duplicated]

score 4 · Answer 1

The effect you want can be obtained with the Pseudo-elements After & Before applying them in the following way:

a.darken:hover:before{
  content: '';
  display: block;
  position: absolute;
  width: 90%;
  height: 3px;
  bottom: 20px;
  right: 20px;
  background: white;
}

a.darken:hover:after{
  content: '';
  display: block;
  position: absolute;
  height: 85%;
  width: 3px;
  bottom: 20px;
  right: 20px;
  background: white;
}

Functional example

/* 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:before{
  content: '';
  display: block;
  position: absolute;
  width: 90%;
  height: 3px;
  bottom: 20px;
  right: 20px;
  background: white;
}

a.darken:hover:after{
  content: '';
  display: block;
  position: absolute;
  height: 85%;
  width: 3px;
  bottom: 20px;
  right: 20px;
  background: white;
}

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>