All comments

• 

  Josh-Adey•20

  @Josh-AdeySubmitted over 2 years ago

  How can I create the active hover state for the image equilibrium of this project?

  

  Responsive landing page using CSS flex box and semantic HTML5

  1

  20
  

  Rahimullah•40

  @biqrarPosted over 2 years ago

  For hover use the below code

  <div class="card">
          <img src="images/image-equilibrium.jpg" alt="" />
        </div>
  
  .container {
  	min-height: auto;
  	max-width: 1440px;
  	background-color: hsl(217, 54%, 11%);
  	border-radius: 10px;
  	margin: auto;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  }
  
  
  .card {
  	height: auto;
  	min-width: 90%;
  	background-image: url(images/hijab-icon-black-vector-illustration-260nw-1712786086.jpg);
  	background-size: cover;
  	margin: 20px 20px;
  	border-radius: 10px;
  	
    }
    
    .card img {
  	width: 100%;
  	height: auto;
  	border-radius: 10px;
    }
    
    .card img:hover {
  	opacity: 0;
  	transition: 1s;
    }
  
  

  Marked as helpful

  0