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>
Related
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;
}
Here is the effect I want:
It's my first time to create a website, so I am using the template from the website and modify the code.
The original code for figure is:
<div class="content">
<div class="media">
<img src="images/home/01.jpg" alt="" title="This right here is a caption." />
</div>
....
</div>
I've tried this, but it did not work:
<div class = "img_div">
<div class="media">
<img src="images/home/01.jpg">
<a href="images/fulls/01.jpg">
<div class="mask">
<h3>A Picture of food</h3>
</div>
</a>
<style>
.img_div {
margin: 20px 400px 0 400px;
position: relative;
width: 531px;
height: 354px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 531px;
height: 354px;
background: rgba(101, 101, 101, 0.6);
color: #ffffff;
opacity: 0;
}
.mask h3 {
text-align: center;
}
</style>
</div>
</div>
Can anyone help me?
/* Your style.css file */
.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: rgb(0,0,0,0.4);
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://i.stack.imgur.com/XZ9UB.jpg" alt="" class="image">
<div class="overlay">
<div class="text">Your Food Description goes here</div>
</div>
</div>
</body>
</html>
This is a nicer solution to your question. Source and adjusted to your image need: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
Since you are a beginner, welcome to the website developer world!
You you may find latest design solutions here https://www.w3schools.com.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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: rgb(0,0,0,0.4);
}
.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>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="images/home/01.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Your Food Description goes here</div>
</div>
</div>
</body>
</html>
<div class = "img_div">
<div class="media">
<a href="#">
<h3>A Picture of food</h3>
<span class="mask"> </span>
<img src="images/home/01.jpg">
</a>
</div>
</div>
<style>
.media {
position: relative;
width: auto;
display: inline-block;
}
span.mask {
position: absolute;
top: 0;
bottom: 0;
background-color: #3a3a3a99;
right: 0;
left: 0;
opacity: 0;
}
.media:hover .mask {
opacity: 1;
}
h3{
position: absolute;
top:10%;
right: 0;
left: 0;
margin: auto;
opacity: 0;
text-align: center;
color: #fff;
}
.media:hover h3{
opacity: 1;
}
</style>
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>
I cannot figure out why my overlay class is not producing the opacity overlay on top of the image. When viewing this in with the developer tools open the overlay box looks as if it is only covering the bottom 5% (just over the word "solutions"), however the link works anywhere on the image.
Does anyone see why my overlay isn't covering the entire image?
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
z-index: 3;
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Add display: block; or display: inline-block to your overlay class. <a> elements are inline elements which size differently than block elements. The link is still working on the entire image since the image is a child of the link
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
/*z-index: 3;*/
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Here I have added a sample code, Hope, this will help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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: rgba(0,0,0,.5);
}
.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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all" class="image">
<div class="overlay">
<div class="text">Solutions</div>
</div>
</div>
</body>
</html>
The background of .overlay was under the image. I applied the black transparency to the pseudo-code of class .overlay.
.machInfo25 {
height: 30vh;
width: 25%;
}
.overlay {
position: relative;
display: block;
}
.overlay:after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: rgb(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
.machInfo25 img {
width: 100%;
}
a .machInfoTitle {
color: white;
}
.total-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>