CODEWITHSUNDEEP
jquerycss
user3953989
user3953989

Reputation: 1929

Div Overlay with content

I'd like to create an overlay with a centered button that, when hovering over the div that contains the image, will appear.

The button will redirect to a new page and the url will depend on the image button that was clicked.

$(document).ready(function () {
        $(".sectionDiv").hover(
            function ()
            {
                $(this).wrap("<div class='sectionDiv'></div>")
                $(this).parent().append("<div id='data'>test</div>");
            },
            function () {
                $('#data').remove();
                $(this).unwrap();
            }
        );
    });

    <div class="sectionDiv">
        <img src="http://images.domain.com/1.jpg">
    </div>

Upvotes: 0

Views: 206

Answers (2)

tao
tao

Reputation: 90068

Here's another example, in case it helps.

html {
  min-height: 100vh;
  margin: 0;
  background-color: #f1f1f1;
}
.container-box {
  width: 70vw;
  display: block;
  margin: 15vh auto;
  border: 1px solid;
  border-color: rgba(255,255,255,.9) rgba(0,0,0,.21) rgba(0,0,0,.21) rgba(255,255,255,.9);
  height: 70vh;
  position: relative;
  box-sizing: border-box;
  box-shadow:0 2px 4px -1px rgba(0,0,0,.1), 0 4px 5px 0 rgba(0,0,0,.07), 0 1px 10px 0 rgba(0,0,0,.06)
}
.container-box img.fit-parent {
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
}
.container-box .overlay {
  background: #000;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  color: white;
  transition: opacity .4s cubic-bezier(.4,0,.2,1), background-color .4s cubic-bezier(.4,0,.2,1);
}
.container-box:hover .overlay {
  opacity: 1;
  background-color: rgba(0,0,0,.7)
}
<div class="container-box">
 <img src="https://unsplash.it/400" class="fit-parent" />
 <div class="overlay">Place anything here...</div>
<div>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

If I understand your end goal, a CSS only solution would look like this. Add your elements to the html, hide with display: none or opacity: 0, and trigger them to be shown when you hover over the thing that contains them.

.sectionDiv {
  display: inline-block;
  position: relative;
}

#data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  background: white;
  padding: 1em;
}

.sectionDiv:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.sectionDiv:before,
#data {
  transition: opacity .5s;
}

.sectionDiv:hover:before,
.sectionDiv:hover #data {
  opacity: 1;
}
<div class="sectionDiv">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div id="data">test</div>
</div>

Upvotes: 1

Related Questions