This question already has answers here:
How to display image over image on hover with css
(3 answers)
Closed 9 years ago.
I want to archive effect like in this site
when I hover over the image I want to show a link with bootstrap icon. I am using bootstrap 3.
original image
when hovered
How can I achieve this?
CSS
.main-block {
width:200px;
height:auto;
position:relative;
display:block;}
.main-block img{width:100%; }
.main-block .badge {width:29px;
height:55px;
background:url(images/badge.png) no-repeat 0 0;
position:absolute;
right:10px;
top:0;
display:none;}
.main-block .badge a {display:block;
height:55px;}
.main-block:hover .badge {display:block;}
HTML
<div class="main-block"><div class="badge"></div><img src="images/character-render.gif" width="400" height="300" alt="1" /> </div>
You can achieve that by using just html and css.
HTML:
<div class="img-wrap">
<img src="http://placekitten.com/240/310" />
<a class="show-on-hover" href="#"></a>
</div>
CSS:
.img-wrap {
position: relative;
display: inline-block;
}
.img-wrap img {
display: block;
}
.show-on-hover {
display: none;
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 0;
background: url('http://placekitten.com/20/30');
}
.img-wrap:hover .show-on-hover {
display: block;
}
Fiddle:
http://jsfiddle.net/HRb4L/
You can do this using CSS
HTML:
<img src="img_url" />
CSS:
a {
position: relative;
display: inline-block;
}
a:hover:before {
content: '';
display: block;
background: rgba(255, 0, 0, .5); /* your background */
width: 20px; /* image width */
height: 100px; /* image height */
position: absolute;
top: 0;
right: 0;
}
SOURCE
Not the most efficient way, but yes, you can achieve it with something like this:
HTML:
<div class="thumbnail-parent">
<img class="thumbnail" src="http://placehold.it/200x200" />
<div class="badge"></div>
</div>
CSS:
.thumbnail-parent, .thumbnail {
width: 200px;
height: 200px;
position: relative;
display: inline-block;
}
.badge {
width: 20px;
height: 20px;
background-color: Black;
position: absolute;
top: 0px;
right: 0px;
visibility: hidden;
}
.thumbnail-parent:hover .badge {
visibility: visible;
}
Related
Hello i'm stuck with this little problem my customer wants to do this in react native the orange border and i really suck in css how can i do it please ?
By skewing a containing parent and counter skewing its child elements you can create what you need with a few lines of CSS:
/* Solution */
.item { transform: skew(-15deg) } /* skew */
.item .content { transform: skew( 15deg) } /* reset */
/* Just eye-candy */
.wrapper { display: flex; gap: 0.5rem }
.item { border: 2px solid orange }
.item .content { padding: 0.5rem 1rem }
.item:hover { cursor: pointer; background-color: hsl(0,0%,96%); border-color: black }
<div class="wrapper">
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
</div>
You can use the transform skew function in css. I would use it on an after pseudo element, so the content of the div will not be deformed. Like so:
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
}
<div class="losange">test</div>
EDIT:
If you also want the background color to be skewed, you can do this by adding it to the after element pseudo element and setting the z-index to -1, which will put it behind the content of the losange.
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
background-color: #eeeeee;
z-index: -1;
}
<div class="losange">test</div>
I've been trying to get my Img's to zoom and produce an overlay with text on my img hover. The text and zoom is currently working but the overlay doesn't. What am I missing in my code?
My first thought was maybe the overlay was hidden behind a value in z-index. When the value was changed the results did not change.
I've tried moving HTML and CSS around to see if this would help. No change in results.
Keep in mind that frame 1 and frame 2 are the ones I'm currently trying to focus on.
Thanks!
.box-wrap {
display: table;
margin: 60px;
}
.zoom {
position: relative;
}
.box-content h1{
height: 100%;
width: 100%;
margin-top: 27%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
/* OVERLAY */
.zoom .overlay {
background-color: black;
position: absolute;
z-index: 4;
opacity: 0;
}
.zoom:hover .overlay {
z-index: 4;
opacity: 0.7;
}
/* END OVERLAY */
/* TEXT */
.zoom h1{
color: white;
position: absolute;
visibility: hidden;
}
.zoom:hover h1 {
pointer-events: none;
visibility: visible;
text-align: center;
vertical-align: middle;
z-index: 3;
}
/* END TEXT */
/* ZOOM EFFECT */
.zoom img {
max-height: 100%;
max-width: 100%;
transition: 6s;
transform: scale(1.0);
}
.zoom img:hover {
transition: 6s;
transform: scale(2.0);
}
.frame {
float: left;
height: 500px;
width: 50%;
overflow: hidden;
}
.frame img {
height: 500px;
width: 100%;
}
/* START BOX 2 */
.frame2 {
float: right;
height: 500px;
width: 50%;
overflow: hidden;
}
.frame2 img {
height: 500px;
width: 100%;
}
/* END BOX 2 */
/* START BOX 3*/
.frame3 {
float: left;
height:300px;
width: 25%;
overflow: hidden;
}
.frame3 img {
height: 300px;
width: 100%;
}
/* END BOX 3 */
/* START BOX 4 */
.frame4 {
object-fit: cover;
float: right;
height:300px;
width: 25%;
overflow: hidden;
object-fit: cover;
}
.frame4 img {
height: 300px;
width: 100%;
}
/* END OF BOX4 */
/* START BOX 5 */
.frame5 {
float: left;
height:300px;
width: 25%;
overflow: hidden;
object-fit: cover;
}
.frame5 img {
height: 300px;
width: 100%;
}
/* END OF BOX5 */
/* START BOX 6 */
.frame6 {
float: right;
height:300px;
width: 25%;
overflow: hidden;
}
.frame6 img {
height: 300px;
width: 100%;
}
<div class="box-wrap">
<div class="frame zoom">
<div class="box-content">
<h1>SKULL</h1>
<img src="img/skull.jpg" alt="#">
<span class="overlay"></span>
</div>
</div>
<div class="frame2 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/liquify.jpg" alt="#">
<div class="overlay"></div>
</div>
</div>
<div class="frame3 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/chief.jpg" alt="#">
</div>
</div>
<div class="frame4 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/vect.png" alt="#">
</div>
</div>
<div class="frame5 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/sun.jpg" alt="#">
</div>
</div>
<div class="frame6 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/card.jpg" alt="#">
</div>
</div>
Try to set the overlay width and height.
.zoom .overlay {
background-color: black;
position: absolute;
z-index: 4;
opacity: 0;
width: 100%; //define here
height: 100% //define here
}
Other usual way to do that is using the :after pseudo element like:
.zoom:after {
background-color: black;
position: absolute;
z-index: 4;
opacity: 0;
width: 100%; //define here
height: 100% //define here
}
This way you don't need to create a .overlay div
Take this snippet:
.container {
width: 150px;
height: 100px;
}
.test {
color: white;
background-color: red;
width: 100%;
height: 25%;
transition: height ease 1s;
}
.test:hover {
height: 100%;
}
<div class="container">
<div class="test">Hover Here</div>
</div>
A simple div inside a container which expands to 100% when hovered over. What I am trying to make is very simular to this, but in a navigation menu (similar to http://www.mineplex.com/).
When a user hovers over the container div (not the main box itself) I need the main div to expand from 0% to 100% in height.
I have tried using JQuery to solve this using a ".hovered" class with no luck. How can one code this?
Any help is much appreciated. Thanks!
Here's a demonstration:
Similarities between both the code snippets:
The containers make use of flex display to make a responsive navbar container, with each of its items spanning a width of 20% (which can be adjusted).
Each of the items (with relative positioning) has two sub containers (with absolute positioning), the first being overlay which we're making use for getting the blue transitioning background(z-index:1) and the second which has a fixed text on the front (z-index:2).
Now, the z-index makes sure that the overlay will be transitioned at the back and text will be fixed in the front, another thing to keep in mind is since we're transitioning it from the bottom up, we set the bottom:0 on the overlay class as well as height:0%;.
On hovering , we transition the height from 0% to 100%.
Differences between both the code snippets:
In the first snippet, we're transitioning each item on hover by making use of .items:hover .overlay.
Whereas in the second snippet, we're transitioning every item when the container is hovered instead of individual items by using .container:hover > *.items> .overlay ( ">" is a direct child selector ).
First: Hovering each item individually to expand the overlay.
.container {
width: 100%;
display: flex;
height: 80px;
background: gray;
justify-content: center;
align-items: center;
}
.items {
flex: 0 1 20%;
height: 100%;
margin-right: 5px;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
background: blue;
z-index: 1;
width: 100%;
height: 0%;
bottom: 0;
transition: all 0.5s ease-in-out;
}
.item-text {
position: absolute;
text-align: center;
color: white;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.items:hover .overlay {
height: 100%;
}
<div class="container">
<div class="items">
<div class="overlay"></div>
<div class="item-text">Home</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">About</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Contact</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Other</div>
</div>
</div>
Second: When the user hovers over the container, expanding all the overlays.
.container {
width: 100%;
display: flex;
height: 80px;
background: gray;
justify-content: center;
align-items: center;
}
.items {
flex: 0 1 20%;
height: 100%;
margin-right: 5px;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
background: blue;
z-index: 1;
width: 100%;
height: 0%;
bottom: 0;
transition: all 0.5s ease-in-out;
}
.item-text {
position: absolute;
text-align: center;
color: white;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.container:hover > *.items> .overlay {
height: 100%;
}
<div class="container">
<div class="items">
<div class="overlay"></div>
<div class="item-text">Home</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">About</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Contact</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Other</div>
</div>
</div>
ul{
list-style-type: none;
margin-left: 0;
padding-left: 0;
display: flex;
}
ul li{
border: 1px solid #d3d3d3;
text-align: center;
height: 100px;
width: 100px;
margin-right: 4px;
}
ul li a{
color: #000000;
text-decoration: none;
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul li a:after{
content: '';
position: absolute;
background: lightblue;
left: 0;
bottom: 0;
height: 0%;
width: 100%;
z-index: -1;
}
ul li a:hover:after{
animation: bounce 1s ease-in-out forwards;
}
#keyframes bounce {
0% {height: 0%}
20% { height: 100%}
55% { height: 95%}
100% {height: 100%}
}
<ul>
<li>Lorem, ipsum.</li>
<li>Saepe, asperiores!</li>
<li>Vitae, expedita?</li>
<li>Dicta, quo.</li>
<li>Sed, et.</li>
</ul>
i wrote some code
//html
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
//This is sass
ul {
list-style:none;
background:red;
li {
display:inline-block;
padding:10px;
position:relative;
&:before {
position: absolute;
content: "";
width: 100%;
height: 0%;
left: 0;
bottom: 0;
background:blue;
transition: height ease-in-out 0.5s;
}
a {
z-index:2;
position:relative;
color:white;
}
&:hover {
&:before {
height: 100%;
}
}
}
}
This jquery slider normally is outlined using a square white box, which hides the image overflow. I need to put the slider on top of another image, so the background cannot be white. I created a new .png file with a transparent background. But how do I hide the image overflow?
Thank you very much; And if you look you can see the old #rotatescroll .overlay background image, and I added a second #rotatescroll .overlay with the transparent background image.
http://jsfiddle.net/QwLun/
HTML
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples>/simple/images/hdr3.jpg" />
</li>
<li><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" />
</li>
<li><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" />
</li>
<li><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" />
</li>
<li><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" />
</li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
CSS
img { border: 0; }
#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0; left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .thumb { background:url('http://baijs.com/tinycircleslider/images/bg-thumb.png') no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#rotatescroll .dot { background:url('http://baijs.com/tinycircleslider/images/bg-dot.png') no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }
#rotatescroll .overlay {background:url('http://baijs.com/tinycircleslider/images/bg-rotatescroll.png') no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .overlay {background:url('http://i.imgur.com/PtgjArP.png') no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
.highlight, .indicator{background-color:#FC0;}
Jquery
$('#rotatescroll').tinycircleslider({
interval: true,
dotsSnap: true,
intervalTime: 1000
});
In this particular case, since the view is meant to be round, I think border-radius: 50% on #rotatescroll .viewport is what you are looking for. With a little tweaking, you can remove the slight outline. See example: http://jsfiddle.net/WKD32/
I am trying to create change image functionality like we can do in GMail account for changing our image.
On mousehover event it shows change image option.
Maybe it is some kind of new concept that I don't know. I am not very good in CSS and JavaScript but I guess that it is a div with changed z-index showing change image option.
Could you please explain how to achieve that kind of effect?
Here is a version using the css pseudo-element :after:
demo
HTML:
<a href="#" class="image">
<img src="http://www.gravatar.com/avatar/c0b4455b645967c1431d73beea9d9c54?s=128&d=identicon&r=PG">
</a>
CSS:
.image img{
width: 100px;
text-decoration: none;
}
.image:after{
content: "Change Image";
display: block;
position: relative;
top: -25px;
width: 100px;
background-color: rgba(77, 144, 254, 0.7);
color: white;
font-weight: bold;
text-decoration: none;
opacity: 0;
transition: opacity 300ms;
}
.image:hover:after{
opacity: 1;
}
If you want a pure CSS solution than you can try it like this
Demo
div.wrap {
position: relative;
display: inline-block;
}
div.wrap img {
position: absolute;
}
div.wrap img:nth-of-type(1) {
opacity: 0;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(1) {
z-index: 2;
opacity: 1;
}
div.wrap img:nth-of-type(2) {
opacity: 1;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(2) {
opacity: 0;
}
is this what you mean?
CSS
.image {
width: 100px;
height: auto;
}
.popup {
top: -25px;
left: 25px;
width: 150px;
height: 75px;
position: relative;
display: none;
background-color: grey;
border-style: solid;
border-width: 1px;
border-radius: 3px;
}
.image:hover + .popup {
display: block;
}
.popup:hover {
display: block;
}
HTML
<img class="image" src="http://img83.imageshack.us/img83/1905/dsc005142kc.jpg" />
<div class="popup">Change Image</div>
On jsfiddle
I'm not sure I understand what you want but I'd say something like that :
HTML :
<img src="yourimage" />
change
CSS :
a.appearOnHover {
display: none;
}
a.appearOnHover {
display: block;
background-color: #777777;
}