css flexbox

Community feedback

• 

  Lindelwe Khumalo•170

  @iSoyecodesPosted about 2 years ago

  Hello, if you would like to add a hover effect to an image similar to the design, i used CSS to place the image. I first entered these basic HTML codes:

     <div class="card-img">
        <div class="card-layer"> </div>
      </div>
  

  If you follow these steps, styling them will be simple for you. First, add an image to the first div with the class "card-img." Next, style the second div with the class "class-layer." We can easily add hover effects to the image using this div. If you are familiar with the concept of "position," it will be helpful.

  When styling in CSS, I did the following:

  .card-img { background: url('../images/image-equilibrium.jpg'); background-size: cover; background-repeat: no-repeat; position: relative; height: 17.38rem; border-radius: 6px; }

  I used the CSS background to insert the images. I used CSS position and set it to relative so that the first div would act as a container for the second div when position absolute was applied and it sticks to the first div.

  .card-img:hover .card-layer { background: url('../images/icon-view.svg'); background-repeat: no-repeat; background-position: center; background-color: rgba(0, 255, 247, 0.3) ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; transition: background-color 200ms ease-in-out; cursor: pointer; }

  If you don't understand this topic, head over to the FreeCodeCamp website to get a better understanding.

  This is what I did. There may be several ways to accomplish the same task, but I chose this approach because it is straightforward and not overly complicated. Feel free to ask me anything; I will happily share my knowledge.

  Marked as helpful

  1