CODEWITHSUNDEEP
jqueryhtmlcss
shreya_js
shreya_js

Reputation: 107

Placing button on image hover

I know i'll get lot of solutions with similar name. But my problem is - My code is working offline . but i put it online... it's not showing any button on image hover. Here is the code..code

2- Issue- i want to remove middle show class outside image. while its removing the class when my mouse in the location of my button... Thanks

i am happy to replace my jquery with css... but dont want to change html..

img:hover{
opacity:0.5;
background-color:#000;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.middleShow {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
<div id='container'>
<div class="row">
        <div class="col-lg-4" align="left"><img src="https://seedroid.com/img/post/icons/128/csdevbin.arham.naturelivewallpaper.jpg" alt="Custom photo wall art of a white perspex box frame of a couple on the beach with a red scarf" width="100%">
        <div class="middle">
         <div class="text">Close Look</div>
        </div>
      
		<h2><a href="/acrylic-box/">Any Text</a></h2>
    <p class="LeeFont">Gbvdcgfn vhgd ghguj gfhjg bn .</p></div>
    </div>      
</div>

Upvotes: 1

Views: 102

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28593

The problem is not really that the button doesn't show, the button does show (or could if the transition attributes were different), but at present, because the opacity is 0, the button appears not to show, and .6s is not long enough for a user to move to the button and click it. You can make a minor adjustment to your code to the duration/delay times of the transition to correct this. 

$(document).ready(function() {
    $("img").hover(function() {
        $(this).siblings("div.middle").addClass("middleShow");
    }, function() {
        $(this).siblings("div.middle").removeClass("middleShow");
    });
});
img:hover {
  opacity: 0.5;
  background-color: #000;
}

.middle {
  transition: opacity .6s ease 1.5s;
  opacity: 0;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.middleShow {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  <div class="row">
    <div class="col-lg-4" align="left"><img src="https://seedroid.com/img/post/icons/128/csdevbin.arham.naturelivewallpaper.jpg" alt="Custom photo wall art of a white perspex box frame of a couple on the beach with a red scarf" width="100%">
      <div class="middle">
        <div class="text">Close Look</div>
      </div>

      <h2><a href="/acrylic-box/">Any Text</a></h2>
      <p class="LeeFont">Gbvdcgfn vhgd ghguj gfhjg bn .</p>
    </div>
  </div>
</div>

The above code will ease-in after .6s and stay on screen for 1.5 seconds. Adjust as you see fit.

Upvotes: 2

Related Questions