Create onclick image overlay

Question

Create onclick image overlay

What I have : I currently have the code, so if you hover over the image, the overlay will slide from bottom to top.

What I want . I want to overlay from bottom to top on the same slide using onclick instead of hovering. I find it difficult to figure out how to achieve this.

code:

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

Run code Hide result

+3

javascript html css onclick overlay

MMM 11 jul. '17 at 3:29

source to share

5 answers

Try this Javascript using jQuery

Js

$(".container").on('click',function(){
    $(this).children(".overlay").css("height","100%");
});

hope this helps.

+2

Chandra shekhar 11 jul. 17 at 3:34 am

source to share

You need JavaScript or better yet jQuery for this. With jQuery, you can easily apply overlay to child elements .container

:

$(".container").on('click', function() {
  $(this).children(".overlay").css('height', '100%');
});

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Slide in Overlay from the Bottom</h2>
<p>Click on the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Run code Hide result

Hope this helps! :)

+1

Obsidian Age 11 jul. 17 at 3:36 am

source to share

You can only do this with CSS.

I can achieve this by adding a selector :focus

to match your selector :hover

.

If your device supports :hover

it, it will be displayed on hover and does not require a button press . If your device does not support :hover

, then pressing an item — for example, on a touchscreen — will trigger a state :focus

, which in this case will simulate the effects of the state :hover

.

In other words, we change:

.container:hover .overlay

to

.container:hover .overlay, .container:focus .overlay

Learn more about focus and its use here

Working example:

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay, .container:focus .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

Run code Hide result

+1

I haz kode 11 jul. '17 at 3:39

source to share

Css:

.fullHeight {
    height: 100%;
}

Jquery:

$(document).ready(function(){
    $('.container').click(function(){
        $('.overlay',this).addClass('fullHeight');
    })
})

$(document).ready(function(){
    $('.container').click(function(){
        $('.overlay',this).addClass('fullHeight');
    })
})

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.fullHeight {
    height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Run code Hide result

+1

Ehsan 11 jul. '17 at 3:43

source to share

Chandra shekhar · Accepted Answer · 2017-07-11T03:40:42+0000

@MMM

A slightly improvised path

CSS

.container .overlay.show{
  height:100%;
}

Js

$(".container").on('click',function(){
    $(this).children(".overlay").toggleClass("show");
});

What it is. on click it opens the overlay, click again it hides the overlay

hope this helps

Create onclick image overlay

More articles: