I have the following code: JSFiddle
HTML:
<div class="profile-image">
<img src="image.png" />
</div>
CSS:
.profile-image img {
width: 48px;
height: 48px;
position: absolute;
left: 12px;
top: 12px;
border-radius: 500px;
display: block;
}
The image tag in the HTML must be there.
How can I make it so that when you hover over the image in the image tags, it shows another image over top of it?
You can show another div on hover of parent div.
.imageBox:hover .hoverImg {
display: block;
}
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
<div class="imageBox">
<div class="imageInn">
<img src="http://3.bp.blogspot.com/_X62nO_2U7lI/TLXWTYY4jJI/AAAAAAAAAOA/ZATU2XJEedI/s1600/profile-empty-head.gif" alt="Default Image">
</div>
<div class="hoverImg">
<img src="https://lh5.googleusercontent.com/-gRq6iatuNYA/AAAAAAAAAAI/AAAAAAAAANk/674knqRN1KI/photo.jpg" alt="Profile Image">
</div>
</div>
Try something like this
<div class="profile-image">
<img src="image.png" />
<div class="image_hover_bg"></div>
</div>
<style>
.profile-image{
position: relative;}
.profile-image img {
width: 48px;
height: 48px;
border-radius: 500px;
display: block;
}
.image_hover_bg{
background: url("images/zoom_icon.png") no-repeat scroll center center rgba(0, 0, 0, 0);
height: 171px;
position: absolute;
top: 0;
width: 210px;
z-index: -1;
display:none;
}
.profile-image:hover .image_hover_bg{display:block}
</style>
Got it myself.
HTML:
<div class="profile-image">
<img src="assets/img/avatar.png" />
<span class="overlay"></span>
</div>
CSS added:
.profile-image:hover .overlay {
position:absolute;
width: 48px;
height: 48px;
z-index: 100;
background: transparent url('overlay_image.png') no-repeat;
cursor: pointer;
}
I got it myself to show an image in the center of another image on hover
HTML:
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<div class="imageBox">
<div class="imageInn">
<img src="background.jpg" alt="Profile Image">
</div>
<div class="hoverImg center">
<img src="sign-check-icon.png" alt="default image">
</div>
</div>
</html>
CSS:
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 350px;
top: 100px;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
Note that left: 350px and top: 100px will be changed based on your background-image in my case background-image was 700x200(width x height). So in order to position the image to the center just take half of width and height.
.figure {
position: relative;
width: 360px;
max-width: 100%;
}
.figure img {
display: block;
max-width: 100%;
height: auto;
}
.figure .image-hover {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
object-fit: contain;
opacity: 0;
transition: opacity .2s;
}
.figure:hover .image-hover {
opacity: 1;
}
<div class="figure">
<img class="image-main" src="https://demo.sirv.com/hc/Bose-700-a.jpg">
<img class="image-hover" src="https://demo.sirv.com/hc/Bose-700-b.jpg">
</div>
Related
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Product</span>
</div>
I need it like this and it must be responsiveness too. Can you tell me how to do that?
So this question has been asked many times before, here's a snippet from a duplicate I've answered in the past. Hope you can work your own code into the example shown :)
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>Product</span>
<img src="http://placehold.it/60x60"/>
</div>
below is code what will do that for you.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
Just put background-image property inside of div style.
One way is to put text as position: absolute;. Another is to put image as background.
#sample-1 img {
vertical-align: middle;
}
#sample-1 {
position: relative;
display: inline-block;
}
#sample-1 span {
position: absolute;
left: 5px;
top: 20px;
}
#sample-2 {
background-image: url('https://placehold.it/60x60');
width: 60px;
height: 60px;
text-align: center;
}
#sample-2 span {
line-height: 60px;
}
<div id="sample-1">
<img src="https://placehold.it/60x60">
<span>Product</span>
</div>
<div id="sample-2">
<span>Product 2</span>
</div>
Try this
<div class="demo">
<img style="vertical-align:middle" src="https://placehold.it/200x200">
<span style="">Product</span>
</div>
css
.demo {
width:200px;
position:relative;
}
.demo span{
position:absolute;
left: 0;
right: 0;
top: 50%;
text-align: center;
margin: -9px auto 0;
}
Use below code in this i have seted line height equals to div height and it is responsive also
#imgContainer{
background: url(https://placehold.it/60x60);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
}
#imgDesc{
top: 50%;
position: relative;
}
<div id="imgContainer">
<span id="imgDesc">Works.</span>
</div>
.image {
position:relative;
}
.image img {
width:300px;
}
.text {
left: 0;
position:absolute;
text-align:center;
top: 100px;
width: 300px
}
<div class="image">
<img src="https://placehold.it/60x60"/>
<div class="text">
Text
</div>
</div>
I have a navbar with a certain height and a logo that overflows. This logo is, of course, clickable, but it means that the part that overflows, is also clickable.
Is it possible to make the logo overflow, but not the clickable area?
HTML
<nav>
<a href="#">
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</a>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
JSFIDDLE
Something like this?
body,
html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
a {
display: inline-block;
height: 100%;
width: 100%;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
pointer-events: none;
}
<nav>
<a href="#">
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</a>
</nav>
Just move logo outside of your link and put that link on rest of header:
body,
html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
display: inline-block;
}
<nav>
<a href="#">
</a>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
Change little bit of you structure.
Put <a> independent and pass link in it with following css.
HTML
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
nav a{
position: relative;
display: block;
height: 100%;
z-index: 1;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
Example : https://jsfiddle.net/67s4ajqf/3/
Don't place the whole div inside the a.
Place the link after the image, give it absolute positioning and carefully set the position and size.
The other answers make the whole header clickable. If it is not desired, use this solution. You may have to adjust the width of the clickable area.
See the example below:
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
a.clickable-logo {
position: absolute;
display: inline-block;
left: 36px;
top: 36px;
width: 600px;
height: 100px;
}
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
<a href="#" class="clickable-logo">
</a>
</div>
</nav>
What about something like this?
HTML
<a href="#">
<div class="clear">
</div>
</a>
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.clear {
height: 100px;
background: 0;
position: absolute;
width: 100%;
z-index: 2;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
I'm learning HTML & CSS so I'm trying to copycat Coder Manual.
I made a div for the background (I'll just use one color for now) and another div for the content of that first blue section with the logo, navigation, etc..
However, I can't make the content div overlay the background div without using something like:
#content {
position: absolute;
top: 0;
}
but that prevents me from centering the content div using:
#content {
width: 50%;
margin: 0 auto;
}
What should I do in such situation?
Edit: here's the html:
<!DOCTYPE html>
<html>
<head>
<title>CM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
<div id="blue-div">
</div>
</body>
</html>
You can use transform to center it like this:
1-With position: absolute in an element with a known width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
margin-left: -20px; /*the half width */
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
2- With position: absolute in an element with an unknown width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
3- Centering even vertically
.center{
height: 80px;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
Personally, I do something like this:
.bg {
width: 100%;
}
.bg-blue {
background-color: blue;
}
.content {
text-align: center;
}
<div class="bg bg-blue">
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
</div>
but if you need to keep the divs seperate:
#BgBlue {
position: absolute;
top: 0;
z-index: -1;
height: 50px;
width: 100%;
background-color: blue;
}
.content {
text-align: center;
}
<div id="BgBlue">
</div>
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
I have the page set up as three images in columns with a hover overlay to them. I am trying to add an additional overlay to them, basically a transparent png, over the main image but before the hover overlay.
Here is my code and I am having issues figuring it out.
fiddle: http://jsfiddle.net/r4mp0v4v/
.wrapper img{
float:left;
width:100%;
}
#media screen and (min-width: 700px) {
.wrapper img{
width:33%;
height:100%;
}
}
body {
display: block;
margin: 0px;
}
img:hover{
opacity: 1;
}
img {
opacity: 0.5;
background: #000;
}
overlay_image{
position: absolute;
top: 60px;
left: 80px;
}
<div class="wrapper">
<a href="Northside.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg" alt="">
<img src="http://creativitywindow.com/wp-content/uploads/2013/02/PNG-Portable-Network-Graphics.png" class="overlay_image">
</a>
</div>
<div class="wrapper">
<a href="Catering.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Foods_(cropped).jpg" alt="">
</a>
</div>
<div class="wrapper">
<a href="test/index.html">
<img src="http://www.healthsguardian.com/wp-content/uploads/2015/05/Improper-time-to-have-some-foods.jpg" alt="">
</a>
</div>
Like this: http://jsfiddle.net/r4mp0v4v/1/
I removed some stuff just so I could see your code better.
.wrapper { position: relative; }
.wrapper img{
width:33%;
}
body {
display: block;
margin: 0px;
}
img.overlay_image:hover{
opacity: 0;
}
img.overlay_image {
opacity: 0.5;
background: #000;
}
.overlay_image{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 5;
}
.main_image{
position: relative;
z-index: 0;
}
I'm trying to create an overlay to be over an image when I hover over it.
The color that I used to create the overlay doesn't go over the image. It goes around the image and I want it to be on top of the image.
I'm not sure where I went wrong.
It is also does this weird jumping thing when you hover over it.
Html
<div class="overlay">
<div class="overlay2"></div>
<figure class="box-img">
<img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>
</div>
css
.overlay:hover{
background: red;
position: absolute;
opacity: 0.7;
}
.box-img img{
position: relative;
}
Here is a jsfiddle: JSFIDDLE
The large 'border' is because of the default margin and padding of a figure element, according to W3 these are the common specs :
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
I always like to do a complete reset myself at the start of the stylesheet :
*, *:before, *:after {
margin: 0;
padding: 0;
}
In the current form of your code, the overlay won't show on top though because the color would be in the background. A pseudo element might do what you're after (updated the code here with a direct approach) :
http://jsfiddle.net/j0qfhr9e/
<figure class="box-img">
<img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>
.box-img {
display: inline-block;
position: relative;
line-height: 0;
}
.box-img:hover:after {
content: '';
width: 100%;
height: 100%;
background: red;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
}
The first draft for completeness, closer to the original markup :
http://jsfiddle.net/rLu2c4kr/
Another alternative to make this work without psuedo class' like #Shikkediel mentioned you can set the can use a background image instead of an image tag http://jsfiddle.net/zgw5tmrc/3/
body, figure {
padding:0;
margin: 0;
}
.box-img {
position: relative;
height: 300px;
width: 300px;
background: url('http://i.imgur.com/PHKC3T9.jpg');
background-size: cover;
}
.box-img:hover .overlay{
position: absolute;
background: red;
width: 100%;
top:0;
bottom:0;
left: 0;
right:0;
opacity: .7;
}
<figure class="box-img">
<div class="overlay"></div>
</figure>
figure {
position: relative;
display: inline-block;
}
img {
display:block;
}
figure:hover::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom:0;
background: red;
opacity: 0.7;
}
<figure>
<img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>
Restructure your markup this way (Here is a JSFIDDLE)
HTML
<div class="overlay-container">
<div class="overlay"> </div>
<figure class="box-img">
<img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>
</div>
CSS
.overlay-container {
width:225px;
height:225px;
position: relative;
}
.overlay-container:hover .overlay{
background: red;
position: absolute;
opacity: 0.7;
z-index:1;
width: 100%;
height: 100%;
margin-left: 40px;
}
.box-img img{
position: relative;
}
Here is a JSFIDDLE