HTML + CSS

Community feedback

• 

  Fernando FeN•425

  @Fernando0654Posted almost 3 years ago

  Right now, as you have your css, replace this to your .img-container::before. You can do this by inspecting elements first to see it works fine

     content: " ";
      position: absolute;
      opacity: 1;
      background-image: url(./images/icon-view.svg);
      background-position: center;
      background-size: 20%;
      height: 100%;
      width: 90%;
      background-repeat: no-repeat;
      background-color: blue;
      border-radius: 10px;
  

  Of course, on background-color add the right color, I just wrote blue because I don't remember the color.

  Good luck, though

  Update: Don't forget to add space on content: " ", otherwise it won't work

  Marked as helpful

  1
• 

  JosephGabriel•100

  @Joseph1032Posted almost 3 years ago

  Hi, Camilo. For the blue background, I would suggest taking a second look at the pseudo element ::before. Try using the background property instead of content for calling the eye image. It would look something like this:

  content: " ";
  position: absolute;
  background: url(./images/icon-view.svg) cadetblue;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  opacity: 0;
  

  You might need to re-work your HTML to get everything right, but it's a start :)

  Marked as helpful

  0
• 

  Victor•290

  @cervantesdeveloperPosted almost 3 years ago

  I added a div with (same dimensions that cube image) position relative that it contains the eye image, that div has a cyan background with .45 as value for the alpha channel. The opacity is 0 until the mouse is over the div.

  0