Currently, I copy this code that shows a hidden div on hover
example
but what I want is something like this
goal
What I want is when you hover on title on the 1st box, shown on the 2nd picture, the div containing the title will slide up and occupy the whole space, revealing the other contents below the title.
Can someone recommend me a tutorial similar to this? Thanks in advance :)
/* try this */
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #000000;
overflow: hidden;
width: 100%;
height: 20%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.container .text2{
display:none;
}
.container:hover .text2{
display:block;
padding-top:30px;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World
<div class="text2"> content 1</div>
</div>
</div>
</div>
All you need to do is change the height percentage of the overlay box like so..
.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: 20%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<!DOCTYPE html>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Related
enter image description here
How can I enter a Hover HTML Code over an image in a simple Mailchimp email template?
Do you mean adding a href link when clicking image?
For example,
<img src=".jpg"/>
To hover over an image I have provided a reference code.Refer links for more understanding:https://www.tutorialrepublic.com/faq/how-to-change-image-on-hover-with-css.php
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="img_avatar.png" alt="My image" class="image">
<div class="overlay">
<div class="text">My Image</div>
</div>
</div>
</body>
</html>
So i have an image i use that is supposed to have a hover function on it. The problem I run into is that the hover area, so where the mouse needs to be to activate the hover function, is way bigger than the image itself. I have linked 2 images below, 1 where the hover is not activated and 1 where it is. On the 2nd image you can clearly see what I mean.
Also below is my HTML and CSS code. I used the following W3 page for this: https://www.w3schools.com/howto/howto_css_image_overlay.asp
Image 1: https://imgur.com/a/jvre00A
Image 2 (you cannot see my mouse, but its all the way over on the right): https://imgur.com/a/OfsQUCB
<div class="containerpic">
<img src="images/duurzaamheid/blauw.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
.containerpic {
position: relative;
width: 180px;
}
.image {
display: block;
width: 180px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 180px;
opacity: 0;
transition: .5s ease;
background-color: green;
}
.container:hover .overlay {
opacity: 0.5;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
Here, is the example. You may see whether image is static or :hover - the area of image remains same.
If you have added some other effects like img:hover {border: 2px solid #bbb;}, or adding some padding or any other effect - then only you'll get mirage that image-area has changed, while in reality it just remains the same.
img:hover {opacity:0.5}
<div><img src="https://picsum.photos/seed/picsum/100/100" /></div>
I modify your code, let see if this will fix it.
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" class="image">
<div class="overlay">
<div class="text">
Hello World
</div>
</div>
</div>
.container {
position: relative;
width: 180px;
}
.image {
max-width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: beige;
z-index: 1;
}
.container:hover .overlay {
opacity: 0.5;
}
.text {
color: black;
font-family: 'Arial';
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
For some reason, my CSS styling is not working. You may notice the #content in each of the CSS styling options. That is because I only wanted these styles to apply to a certain section of my website. I looked online and used the W3Schools resource, yet for some reason, it still doesn’t work. My images do not have the hover effect. I want my images to look like these:
https://www.medi360.in/NewHome/Our_Specialists.html
#content.container {
position: relative;
width: 50%;
}
#content img {
width: 100%;
height: auto;
border-radius: 50%;
}
#content .column{
float:left;
width:33.33%;
padding:5px;
}
#content .row::after{
content: "";
clear:both;
display:table;
}
#content .overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: transparent;
overflow: hidden;
width: 100%;
transition: background-color .5s ease;
border-radius:50%;
}
#content .overlay:hover {
bottom: 0;
height: 100%;
opacity: 0.5;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
transition: background-color .5s ease;
}
#content.text {
color: white;
font-size: 20px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="content">
<!-- main container-->
<div class="container">
<div class="row sidebar-page">
<!-- Page Content -->
<div class="col-lg-12 page-content">
<!-- Classic Heading -->
<!--first image -->
<div class="col-lg-12 div-gap-padding">
<div class="container">
<div class="column">
<div class="team">
<div class="img">
<img src="/static/img/team/team-1.jpg" alt="" style="width: 200px;">
<div class="overlay">
<div class="text"></div>
</div>
</div>
<h3 class="team-prof">
Dr. Pawan Kumar Kesari
</h3>
</div>
</div>
</div>
Apply an id="" or class="" to the img element itself, and set the border-radius of that class or id to 50%, then you can set the hover attribute of the element above it to respond and change color when you hover over that. since you're aligning the image to the element that changes color, the element that changes on hover should have the hover attribute.
For clarification:
#content.container {
position: relative;
width: 50%;
}
#content img {
width: 100%;
height: auto;
border-radius: 50%;
}
#content .column{
float:left;
width:33.33%;
padding:5px;
}
#content .row::after{
content: "";
clear:both;
display:table;
}
#content .overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: transparent;
overflow: hidden;
width: 100%;
transition: background-color .5s ease;
border-radius:50%;
}
#content .overlay:hover {
bottom: 0;
height: 100%;
opacity: 0.5;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%; border-radius:50%;
transition: background-color .5s ease;
}
#content.text {
color: white;
font-size: 20px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
I've making an image and a slide and everything seems to work the way I want it, but the left side reacts when I haven't even reached the image. I've played with if for a while but as it is I can't figure out why.
not to mention I can't find the words but I haven't worked on that part much.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 40px;
left: 225px;
right: -50%;
background-color: black;
overflow: hidden;
width: 137%;
height: 0%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
bottom: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.actives_center_image_1{
position: relative;
margin-left: 30%;
bottom: 40px;
display: block;
}
<div class="container">
<img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
you have defined the hover for the container and your image has left a margin. Either remover the margin or define hover for the image because of
.actives_center_image_1{
position: relative;
margin-left: 30%;
bottom: 40px;
display: block;
}
.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 40px;
left: 225px;
right: -50%;
background-color: black;
overflow: hidden;
width: 137%;
height: 0%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
bottom: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.actives_center_image_1{
position: relative;
bottom: 40px;
display: block;
}
<div class="container">
<img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Or you can define another container and put it inside the main one and do the same thing.
I'm trying to modify this
code, so the box would slide to the left side of the box.
I was thinking that I should just change in class .overlay right: 0; to right: 100%;, but its not doing anything. It should look like this
Also What should I do when when the box slides to the right side and I hover my mouse to it my box stays until I move my mouse away, how can I fix it?
Here is the css code when I did tha animation to the right side:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 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%);
}
Use this code to move the overlay to left on hover
.overlay {
position: absolute;
bottom: 0;
left: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: -100%;
}
.container {
position: relative;
width: 50%;
float:right;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: -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%);
}
<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Is this what you're trying to do? https://codepen.io/anon/pen/MmNXmN
HTML
<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
CSS
.container {
position: relative;
width: 50%;
float: right;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
right: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
right: 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%);
}