html and css bootstrap

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  For the hover effect of image wrap the img tag in a div, within that div wrap the icon view in a div. <div class=" equil-image"><img class="img"><div class= "overlay"><img></div> </div>

  in the css, give .equil-image a width of 100% and position: relative , give .img a width of 100% and display: block. give .overlay position: absolute, right, left, bottom, top, of 0 background-color of cyan and opacity of 0. Give img:hover .overlay opacity of 0.9 and a pointer value of cursor.

  .equil-image{
  width:100%;
  position: relative;
  }
  .img{
  width:100%;
  height:100%;
  }
  .overlay{
  position: absolute;
  top:0;
  left:0;
  bottom: 0;
  right: 0;
  background-color: hsl();
  opacity: 0;
  }
  .img:hover .overlay{
  opacity:0.9;
  cursor: pointer;
  }
  

  To center .icon on the image.:

  .overlay img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0