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
Related
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%;
}
}
}
}
I want the contents of a div to slide down from the top. All of the methods I have tried seem to 'reveal' the contents which is almost static. I want to slide down from off the edge of the screen and push the content too. How would I do this? Jsfiddle here
html
<div id="dolphin">
<div id="lizard"><img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg"></div>
</div>
<div id="content"></div>
css
#lizard {
padding:50px;
display:none;
}
#dolphin {
position: fixed;
width: 100%;
background-color: green;
}
#content {
height: 2000px;
}
js
$(document).ready(function(){
$("#dolphin").click(function(){
$("#lizard").stop().slideToggle("fast");
});
});
You can move things with negative margins to create a slide effect instead of a reveal effect.
This is a very rough example but you can see how it's originally hidden with margin-top: -100%; and revealed by setting margin-top to 0;
$(".slide-button").click(function(){
$(".lizard").toggleClass('slideit');
});
html, body {margin: 0; padding: 0;}
div {
text-align: center;
}
.slide-button {
position: fixed;
top: 0; right: 0; left: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
height: 20px;
background-color: green;
cursor: pointer;
}
.lizard {
width: 100%;
padding-top: 20px;
overflow: hidden;
background-color: green;
transition: all 0.5s ease;
}
.lizard img {
margin-top: -100%;
transition: all 0.5s ease;
opacity: 0;
}
.lizard.slideit img {
margin-top: 10px;
opacity: 1;
}
.content {
height: 1000px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button">slide it</div>
<div class="lizard">
<img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg">
</div>
<div class="content"></div>
fiddle
https://jsfiddle.net/Hastig/qjfgsrL0/1/
I need to make such an effect (jsfiddle), but with two photos.
It occurred to me to use skewed div who would hide part of the image and the second image is below.
And I know not how.
Please help me.
I thank you.
Code:
html:
<div id="container">
<img src="https://s31.postimg.org/l6m2amhm3/img.jpg">
<div class="man">
<div class="color"></div>
</div>
</div>
css:
#container {
height: 400px;
width: 700px;
position: relative;
}
#container div, #container img {
height: 100%;
position: absolute;
}
.man {
margin-left: 50%;
width: 50%;
}
.man:hover > div {
margin-left: -10%;
width: 25%;
}
.color {
background-color: rgb(181, 230, 247);
margin-left: 20%;
transition: all 0.5s;
transform: skewX(11deg);
width: 0;
}
Problem:
On hover div .galleryIndex will be "filled" with div .galleryHover. .galleryIndex has width in percentage and doesn't have fixed height. I want to put div .white_line_gallery_hover at the bottom of div .galleryHover.
HTML:
<div class="galleryIndex">
<img src="images/galleryIndex1.png" class="imageResponsive" />
<div class="galleryHover">
<img src="images/kotacGalerija.png" class="imageResponsive" />
<div class="white_line_gallery_hover">
Some text
</div>
</div>
</div>
CSS:
.galleryIndex
{
width: 33.33%;
height: auto;
overflow: hidden;
float: left;
position: relative;
z-index: 1;
}
.galleryHover
{
position:absolute;
top:0;
left:0;
bottom: 0;
width:100%;
height:100%;
background-color: rgba(24, 2, 51, 0.8);
}
.imageResponsive
{
width: 100%;
height: auto;
}
.white_line_gallery_hover
{
width: 90%;
height: 10%;
overflow: hidden;
padding-left: 10%;
font-size: 20px;
line-height: 40px;
background-color: white;
}
Try giving ".white_line_gallery_hover" "position: absolute; bottom: 0" and removing the "height: 10%". This will cause "white_line_gallery_hover" to overlay the bottom portion of the image in "galleryIndex".
See: http://jsfiddle.net/ff22qayv/
.galleryIndex
{
width: 33.33%;
height: auto;
overflow: hidden;
float: left;
position: relative;
z-index: 1;
}
.galleryHover
{
position:absolute;
top:0;
left:0;
bottom: 0;
right: 0;
background-color: rgba(24, 2, 51, 0.8);
}
.imageResponsive
{
width: 100%;
height: auto;
}
.white_line_gallery_hover
{
position: absolute;
bottom: 0;
width: 90%;
overflow: hidden;
padding-left: 10%;
font-size: 20px;
line-height: 40px;
background-color: white;
}
<div class="galleryIndex">
<img src="https://placekitten.com/g/300/300" class="imageResponsive" />
<div class="galleryHover">
<img src="images/kotacGalerija.png" class="imageResponsive" />
<div class="white_line_gallery_hover">
Some text
</div>
</div>
</div>
If this is not what you want, you might consider updating your question with a visual representation of the desired result.
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;
}