responsive landing page using CSS Flex

Community feedback

• 

  lr6kidy•280

  @lr6kidy

  Posted about 3 years ago

  Hi Moruf!

  There might be a more effective way to do the hover effect, but this is how I did it:

  I created a <div> the exact same size as the image, with a background-color of the bright cyan color listed in the style guide, and placed it over the image.

  I used position: absolute; to place the eye icon in the middle of said <div>.

  I then set the opacity of both the div and the icon to 0, so that they don't normally appear.

  I changed the opacity to 0.5 for div:hover and to 1 for icon:hover.

  I hope this helps in any way!

  00
• 

  Mo•840

  @MohamedAridah

  Posted about 3 years ago

  Hello @MorufLawal, congratulation on submitting your first solution🎉👏.

  I have some notes for you:

  • for the hover effect, put the image with .eqn class inside div with .image-wrapper class for example and follow these styles:

  .image-wrapper::after{
  	content: url(./images/icon-view.svg);
  	position: absolute;
  	background-color: rgb(0 255 247 / 45%);
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  	top: 0;
  	left: 0;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	cursor: pointer;
  	border-radius: 1rem;
  	overflow: hidden;
  	transition: .3s ease;
  }
  

  .image-wrapper:hover::after {
      opacity : 1;
  }
  

  i used div to wrap the image and do the hover effect since <img> alone doesn't work with ::after pseudo element.

  • instead of using <hr> tag you can use border-top or border-bottom depending on the div you will use it. Also this is more Semantic

  • for .Bottom give it text-align: start to be like the design also give space between the avater image and the text.

  • use <a> element instead of span for author name. It's more Semantic and on click this name this may lead to another page.

  • you can see My solution for this challenge it may be helpful for you..!

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day.

  Keep coding🚀

  00