CODEWITHSUNDEEP
htmlcss
jixodoj
jixodoj

Reputation: 329

CSS - Show overlay on hover

I want to show an overlay. when we hover on the image. I have created the overlay with :before setting the opacity to 0 and visibility to hidden. then on image hover I'm setting them to 1 and visible but the overlay isn't showing on hover. can someone explain what am I doing wrong.

How can I solve this?

#home-d .projects-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 4rem;
  text-align: center;
}

#home-d .projects-wrapper .project .image {
  position: relative;
}

#home-d .projects-wrapper .project .image:before {
  content: '';
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: rgba(100, 81, 246, 0.9);
  border-radius: 10px;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

img:hover #home-d .projects-wrapper .project .image:before {
  opacity: 1;
  visibility: visible;
}

#home-d .projects-wrapper .project .image img {
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#home-d .projects-wrapper .project .image img:hover {
  -webkit-box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
}

#home-d .projects-wrapper .project h3 {
  font-size: 1.2rem;
  font-weight: 400;
  padding: 1rem 0;
}
<section id="home-d" class="py-4">
  <div class="container">
    <h2 class="section-title">Explore Our Works</h2>
    <p class="section-subtext w-40">
      Lorem Ipsum is simply dummy text of the printing and typesetting has
      been the industrys standard dummy text ever since
    </p>
    <div class="projects-wrapper">
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
    </div>
  </div>
</section>

Upvotes: 0

Views: 338

Answers (4)

swift-lynx
swift-lynx

Reputation: 3755

First of all, opacity: 0; and visibility: hidden; are redundant, use only one of the two.

Second, use ::before instead of :before.

Then use the hover selector as follows:

#home-d .projects-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 4rem;
  text-align: center;
}

#home-d .projects-wrapper .project .image {
  position: relative;
}

#home-d .projects-wrapper .project .image::before {
  content: '';
  /* only use visibility */
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: rgba(100, 81, 246, 0.9);
  border-radius: 10px;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

/* select the image on hover */
#home-d .projects-wrapper .project .image:hover::before {
  /* only use visibility */
  visibility: visible;
}

#home-d .projects-wrapper .project .image img {
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#home-d .projects-wrapper .project .image img:hover {
  -webkit-box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
}

#home-d .projects-wrapper .project h3 {
  font-size: 1.2rem;
  font-weight: 400;
  padding: 1rem 0;
}
<section id="home-d" class="py-4">
  <div class="container">
    <h2 class="section-title">Explore Our Works</h2>
    <p class="section-subtext w-40">
      Lorem Ipsum is simply dummy text of the printing and typesetting has
      been the industrys standard dummy text ever since
    </p>
    <div class="projects-wrapper">
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Ishita Ray
Ishita Ray

Reputation: 666

You need to hover project class. image class is child of project class so if you need hover css effect you can only use ".image:hover::before" or like the example I have given.

  • List item

#home-d .projects-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 4rem;
  text-align: center;
}

#home-d .projects-wrapper .project .image {
  position: relative;
}

#home-d .projects-wrapper .project .image:before {
  content: '';
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: rgba(100, 81, 246, 0.9);
  border-radius: 10px;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

#home-d .projects-wrapper .project:hover .image::before {
  opacity: 1;
  visibility: visible;
}

#home-d .projects-wrapper .project .image img {
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#home-d .projects-wrapper .project .image img:hover {
  -webkit-box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
}

#home-d .projects-wrapper .project h3 {
  font-size: 1.2rem;
  font-weight: 400;
  padding: 1rem 0;
}
<section id="home-d" class="py-4">
  <div class="container">
    <h2 class="section-title">Explore Our Works</h2>
    <p class="section-subtext w-40">
      Lorem Ipsum is simply dummy text of the printing and typesetting has
      been the industrys standard dummy text ever since
    </p>
    <div class="projects-wrapper">
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
    </div>
  </div>
</section>

Upvotes: 0

Ramon de Vries
Ramon de Vries

Reputation: 1342

you tried to show the overlay upon hovering an img outside the #home-d by putting the hover infront of every selection, combining the img:hover with img:before will make it work:

#home-d .projects-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 4rem;
  text-align: center;
}

#home-d .projects-wrapper .project .image {
  position: relative;
}

#home-d .projects-wrapper .project .image:before {
  content: '';
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: rgba(100, 81, 246, 0.9);
  border-radius: 10px;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

#home-d .projects-wrapper .project .image:hover:before {
  opacity: 1;
  visibility: visible;
}

#home-d .projects-wrapper .project .image img {
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#home-d .projects-wrapper .project .image img:hover {
  -webkit-box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
}

#home-d .projects-wrapper .project h3 {
  font-size: 1.2rem;
  font-weight: 400;
  padding: 1rem 0;
}
<section id="home-d" class="py-4">
  <div class="container">
    <h2 class="section-title">Explore Our Works</h2>
    <p class="section-subtext w-40">
      Lorem Ipsum is simply dummy text of the printing and typesetting has
      been the industrys standard dummy text ever since
    </p>
    <div class="projects-wrapper">
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="project">
        <div class="image">
          <img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
        </div>
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
    </div>
  </div>
</section>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206058

img:hover #home-d .projects-wrapper .project .image:before

is wrong. #home-d is not a child of img.
Try with

#home-d .projects-wrapper .project .image:hover:before {

Upvotes: 0

Related Questions