How to make fade hover change on a parent div when we hover over a child div?
I want the hover to have a fade effect and change the background image of the parent div. The change is happening very fast. I want the change to happen and slowly and smoothly.
<script>
$('#hoverdiv').on('mouseover', function(){
$(this).parent().addClass('is-hover');
}).on('mouseout', function(){
$(this).parent().removeClass('is-hover');
})
</script>
.bground {
width:100%;
position:relative;
background: url(../img/bg1.jpg) no-repeat top center;
}
.bground:after {
content: url(../img/bg2.jpg);
width:0;
height:0;
display:none;
}
.is-hover {
background: url(../img/bg2.jpg) no-repeat top center;
}
#hoverdiv
{
width:auto;
height:auto;
margin:0 auto;
padding:0;
}
<section id="bground" class="bground">
<div id="hoverdiv">
<div class="display">
<img src="img/logo.png" alt="Logo">
</div>
<div class="page-scroll">
<a href="#about" class="btn btn-circle" style="color:#000000">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
You are adding and removing class with js which cannot be slow down.
What you can do is add transition in css
.is-hover {
background: url(../img/bg2.jpg) no-repeat top center;
transition:all ease-in-out 0.3s;
-moz-transition:all ease-in-out 0.3s;
-ms-transition:all ease-in-out 0.3s;
-o-transition:all ease-in-out 0.3s;
-webkit-transition:all ease-in-out 0.3s;
}
It is important to add prefix like -moz-, -webkit- etc to let it work in all browsers.
There is no need for javascript. You can easily achieve this with css transitions:
.bground {
width: 400px;
height: 300px;
background: #aaa url("http://placehold.it/300x200/ffff00") no-repeat top center;
position: relative;
}
.bground:after {
content: "";
background: url("http://placehold.it/300x200/ff0000") no-repeat top center;
position: absolute;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all .3s;
}
.bground:hover:after {
visibility: visible;
opacity: 1;
}
<div class="bground"></div>
.bground {
width: 400px;
height: 300px;
background: #aaa url("http://placehold.it/300x200/ffff00") no-repeat top center;
position: relative;
}
.bground:after {
content: "";
background: url("http://placehold.it/300x200/ff0000") no-repeat top center;
position: absolute;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all .5s linear 0s;
}
.bground:hover:after {
visibility: visible;
opacity: 1;
color:#fff;
}
<div class="bground"></div>
Related
I have an absolutely positioned image inside a relatively positioned container.
Height of image is bigger than that of the container.
I want the image to scroll up to its end using only CSS.
The catch is that height of the image could vary, so it makes sense to make sure that bottom of the image is aligned with bottom of the container once hovered.
Following is the code:
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
bottom: 0;
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
Try transition on transform
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: transform 1s ease;
}
img:hover {
transform: translateY(-60%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
EDIT:
As the height is not set, I'd suggest a jQuery/js solution
$("img")
.mouseover(function() {
var offset = -$(this).height() + 200;
$(this).css("top", offset);
})
.mouseleave(function() {
$(this).css("top", 0);
});
body {
display: flex;
justify-content: space-around;
}
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: top 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Vertical-Banner-EN.jpg">
</div>
You need a way to position the element equivalent to bottom: 0px, but taken for the reference the top .
If you set top: 100%, the top of the element will be at the bottom of the parent.
Then, set a transform of 100%, and the bottom will be where the top was.
Notice that this solution works for any image and container height.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0%;
transform: translateY(0%);
transition: all 1s ease;
}
img:hover {
top: 100%;
transform: translateY(-100%);
}
<div class="box">
<img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>
You can have a transition between bottom: 0 and bottom: calc(100% - 18px), which is the height of the container minus the height of box2.
.box {
position: relative;
display: block;
height: 200px;
width: 200px;
background-color: red;
}
.box2 {
position: absolute;
height: 18px;
bottom: calc(100% - 18px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.box:hover .box2 {
background-color: green;
bottom: 0;
}
<div class="box">
<div class="box2">
test
</div>
</div>
You can use this, try this with working snippet,
.box{
position:relative;
display:block;
height:200px;
width:200px;
background-color:red;
transition: all 1s ease;
}
.box2{
position: absolute;
transition: all 1s ease;
}
.box:hover .box2{
background-color:green;
margin-top: 180px;
}
<div class="box">
<div class="box2">
test
</div>
</div>
I have a div with class .side-buttons. This div will slide in and off when user's mouse hover over the div. I was wondering how can I hide the div completely and say when the user's mouse is in the area it would slide in?
I tried getting the off the screen but that wouldn't work as it would only work when my mouse on the div
This is my website - http://smati.ca/test/index.html (Don't click continue but instead click around the popup modal to get off the modal overlay. There you can see the div in action)
Here's my css code :
.side-buttons {
position: absolute;
right: -100px;
top: 55%;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.side-buttons:hover {
right: 0px;
}
.side-buttons a {
display: block;
background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
border-radius: 0;
box-shadow: none;
border: none;
color: #f5f5f5;
font-size: 22px;
font-family: "Lato", sans-serif;
}
.side-buttons a small {
font-size: 16px;
}
.side-buttons a:hover,
.side-buttons a:focus,
.side-buttons a:active {
background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
color: #f5f5f5;
}
.side-buttons a:nth-child(2) {
background: linear-gradient(to left, #de3c88 15%, #f0a473 100%);
}
You could try something like this too i.e wrapping it by a div and performing that slide-in and slide-out effect on child div as below,
#bx{
width:210px;
height:120px;
position:absolute;
top:40%;
right:0;
overflow:hidden;
border:1px solid rgba(0,0,0,0.1);
}
#bx > .b{
position:absolute;
width:200px;
height:120px;
background:blue;
right:-200px;
transition:0.6s ease;
}
#bx:hover > .b{
right:0px;
}
<div id="bx">
<div class="b">
</div>
</div>
You can use a pseudo element, like this
html, body {
margin: 0;
}
div {
position: absolute;
width: 0;
right: 0;
height: 150px;
background: red;
transition: width 0.5s;
}
div::after {
content: '';
position: absolute;
width: 30px;
right: 100%;
height: 100%;
transition: width 0s 0.5s;
border: 1px dotted gray; /* added for demo purpose */
}
div:hover {
width: 100px;
transition: width 0.5s;
}
div:hover::after {
width: 0;
transition: width 0.5s;
}
<div>
</div>
Here is another option, that might be easier to add to your existing solution
html, body {
margin: 0;
}
.content {
width: 170px;
padding: 50px 30px;
background: lightgray;
}
.wrapper {
position: absolute;
right: 0;
width: 0;
padding-left: 30px;
overflow: hidden;
transition: width 0.5s, padding-left 0s 0.5s;
border: 1px dotted gray; /* added for demo purpose */
}
.wrapper:hover {
width: 200px;
padding-left: 0;
transition: width 0.5s, padding-left 0.5s;
}
<div class="wrapper">
<div class="content">
Some text and/or images<br>
or anything else needed
</div>
</div>
Almost at the bottom of the page you see 4 images with a button inside of each image. (Verona, Mono Silk, Fibre Silk and Akvarell).
I'm trying to achieve an image, with a centered (both veritically and horizontally) text inside of it. And it all needs to be responsive.
The most important thing that I need to fix with these buttons though is that when you hover over a button, I want the image to become darker (just like it is now) but I want it to stay that way even when you hold the mouse over the text inside. I don't understand which approach I need to have to achieve that.
The html code for a button is:
.product-container {
position:relative;
background-color: #000000;
}
.product-btn {
position: absolute;
top:39%;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(0,0,0, 0.3);
width: 50%;
border: 1px solid #e1e1e1;
color: #ffffff;
padding: 5px 0;
}
.product-img {
width:100%;
height: auto;
opacity: 1;
transition:
opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-webkit-transition: opacity 0.1s ease-in-out;
}
.product-img:hover {opacity: 0.5;}
<div class="product-container">
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
<a href="http://google.se">
<p class="product-btn">Mono Silk</p>
</a>
</div>
How can I achieve this?
To have the image darker when hover both image and text, I changed this CSS rule
.product-img:hover {opacity: 0.5;}
to this
.product-container:hover img {opacity: 0.5;}
You also had an extra closing </div> tag which I removed.
Having block level (p) element inside an inline (a) is invalid, so I changed your p to a span and added text-align: center; to its CSS rule so the text inside is centered.
Having block level element, like p, inside an inline element is in general invalid, though according to the new HTML5 specs, an a now can have block level elements inside (Thanks to #tjameswhite pointing that out), as long as there is no interactive content within (e.g. buttons or other links).
Sample snippet
.product-container {
position:relative;
background-color: #000000;
}
.product-btn {
position: absolute;
top:39%;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(0,0,0, 0.3);
width: 50%;
border: 1px solid #e1e1e1;
color: #ffffff;
padding: 5px 0;
text-align: center;
}
.product-img {
width:100%;
height: auto;
opacity: 1;
transition:
opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-webkit-transition: opacity 0.1s ease-in-out;
}
.product-container:hover img {opacity: 0.5;}
<div class="product-container">
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg">
<a href="http://google.se">
<span class="product-btn">Mono Silk</span>
</a>
</div>
Change the Markup so that image comes after the link.
Then css will get the link to be in center of parent:
.product-container {
position:relative;
background-color: #000000;
}
.product-btn {
position: absolute;
top:50%;
left: 50%;
background-color: rgba(0,0,0, 0.3);
width: 50%;
border: 1px solid #e1e1e1;
color: #ffffff;
padding: 5px 0;
transform: translate(-50%, -50%);
}
.product-img {
width:100%;
height: auto;
opacity: 1;
transition:
opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-webkit-transition: opacity 0.1s ease-in-out;
}
.product-container > a:hover + img {opacity: 0.5;}
<div class="product-container">
<a href="http://google.se">
<p class="product-btn">Mono Silk</p>
</a>
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"></div>
</div>
In CSS (slow the style change in product-container and make hover action for it):
.product-container {position:relative; background-color: #000000;
transition: opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-webkit-transition: opacity 0.1s ease-in-out;
}
/*.product-img:hover {opacity: 0.5;}*/
.product-container:hover img {opacity: 0.5;}
In HTML (put link inside the .product-container div):
<div class="product-container"><img class="product-img" src="./Material _ ProFormat AB_files/monosilk.jpg"/><p class="product-btn">Mono Silk</p></div>
Adjust the markup so the image and text are inside of the link:
<div class="col-sm-3 text-center">
<a href="http://google.se" class="product-container">
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg" alt="">
<div class="product-btn">Mono Silk</div>
</a>
</div>
This removes an extra container (moving the product-container class to the link). Then update styles to something like:
.product-container {
position:relative;
background-color: #000000;
display: block;
height: 426px;
width: 426px;
}
.product-img {
width: 426px;
height: 426px;
}
.product-btn {
position: absolute;
top: 39%;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(0,0,0, 0.3);
width: 50%;
border: 1px solid #e1e1e1;
color: #ffffff;
padding: 5px 0;
text-align: center;
}
.product-container:hover .product-img {opacity: 0.5;}
.product-container:hover .product-btn {background: rgba(0,0,0,1)}
Note that the link (.product-container) has display: block; and a set width and height, as does the image. Adjust as needed.
The advantage to this is that the entire box is now one big clickable button.
A cool trick is using pseudo elements to vertically align inline blocks. This allows for multiple lines of text to also be aligned properly.
I apologise as I'm at work at the moment, so I hope this fiddle helps.
Will go into more detail in an update later if requested:
https://jsfiddle.net/pj5p0s3s/
/*Disgusting stuff for demo :) */
.product-container {
float:left;
margin-right:5px;
max-width:200px;
}
/* */
.product-container {
position:relative;
background-color: #000000;
}
.product-container a {
display:block;
}
.product-container a:after {
content:"";
background: rgba(0,0,0, 0.3);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.product-container a:hover:after {
background: rgba(0,0,0,0.6);
transition: 0.3s;
}
.product-container-overlay {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
text-align:center;
z-index:1;
}
.product-container-overlay:before {
content:"";
height:100%;
display:inline-block;
width:1px;
vertical-align:middle;
}
.product-btn {
background-color: rgba(0,0,0, 0.3);
width: 50%;
border: 1px solid #e1e1e1;
color: #ffffff;
padding: 5px 0;
display:inline-block;
vertical-align:middle;
}
.product-img {
width:100%;
height: auto;
display:block;
}
.product-img:hover {
opacity: 0.5;
}
<div class="product-container">
<a href="http://google.se">
<div class="product-container-overlay">
<p class="product-btn">Mono Silk</p>
</div>
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
</a>
</div>
<div class="product-container">
<a href="http://google.se">
<div class="product-container-overlay">
<p class="product-btn">Mono Silk long title lipsum</p>
</div>
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
</a>
</div>
<div class="product-container">
<a href="http://google.se">
<div class="product-container-overlay">
<p class="product-btn">Mono Silk</p>
</div>
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
</a>
</div>
I have an image and I try to make the top 50% show a different colour and text when hover over. And the same for the lower 50% of the height of the image.
I came so far to get the below 50% but its all over the page, not just the image, and the top 50% doesnt show. Is it possible to achieve my goal?
BOOTPLY... BOOTPLY
/* CSS used here will be applied after bootstrap.css */
.image img {
display: block;
}
.thumb-wrap img {
width: 50%;
height: auto;
}
.thumb-wrap:hover .thumb-caption {
opacity: 0.7;
}
.thumb-caption {
position: absolute;
left: 0px;
bottom: 0;
width: 100%;
height: 50%;
background-color: #000;
margin: 0;
z-index: 1;
text-align: center;
opacity: 0;
-webkit-transition: all, .5s;
-moz-transition: all, .5s;
-o-transition: all, .5s;
-ms-transition: all, .5s;
transition: all, .5s;
}
/*.thumb-caption-above {
position: absolute;
left: 0px;
top: 0;
width: 100%;
height: 50%;
background-color:red;
margin: 0;
z-index: 0;
text-align: center;
opacity: 0;
-webkit-transition: all, .5s;
-moz-transition: all, .5s;
-o-transition: all, .5s;
-ms-transition: all, .5s;
transition: all, .5s;
}*/
<div class="image">
<div class="thumb-wrap">
<img src="http://placehold.it/550x150">
<h2 class="thumb-caption"><a href="#">More info
</a></h2>
<h2 class="thumb-caption-above"><a href="#">See larger
</a></h2>
</div></div>
<div id="push"></div>
Try this:
.thumb-wrap {
width: 550px;
position: relative;
}
.thumb-caption:hover {
opacity: 0.7;
}
/* Default styles for hover block */
.thumb-caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
background-color: #000;
margin: 0;
z-index: 1;
text-align: center;
opacity: 0;
transition: all, .5s;
}
/* Alternate positioning and background color */
.thumb-caption.above {
top: 0;
background: red;
}
/* For the text color */
.thumb-caption > a {
color: blue; /* default */
}
.thumb-caption.above > a {
color: yellow; /* alternate */
}
<div class="image">
<div class="thumb-wrap">
<img src="http://placehold.it/550x150">
<h2 class="thumb-caption">More info</h2>
<h2 class="thumb-caption above">See larger</h2>
</div>
</div>
The important part for positioning was adding position: relative on your .thumb-wrap container element. I removed the CSS browser prefixes for brevity, but you could add them back in.
The following example shows up both alternatives (info and zoom) at the same time, with the one immediately on hover highlighted.
* {
font-size:1.05em;
color: white;
font-family: arial;
}
#image {
width:550px;
height:150px;
position:relative;
background: url('http://i.imgur.com/HNj6tRD.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
}
.coverUP {
width: 100%;
height: 50%;
position:absolute;
top:0%;
}
.coverDOWN {
width: 100%;
height: 50%;
position:absolute;
top:50%;
}
.coverUP:hover::after {
background: #cc99ff;
opacity: 0.6;
pointer-events: none;
transition: all, 0.6s;
}
.coverDOWN:hover::before {
background: #cc99ff;
opacity: 0.6;
pointer-events: none;
transition: all, 0.6s;
}
.coverUP:hover::before {
background: purple;
opacity: 0.8;
pointer-events: none;
transition: all, 0.6s;
}
.coverDOWN:hover::after {
background: purple;
opacity: 0.8;
pointer-events: none;
transition: all, 0.6s;
}
.coverUP::after {
content: "\A ZOOM";
white-space: pre;
text-align:center;
width: 100%;
height: 100%;
background: #cc99ff;
position:absolute;
top:100%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}
.coverDOWN::before {
content: "\A INFO";
white-space: pre;
text-align:center;
width: 100%;
height: 100%;
background: #cc99ff;
position:absolute;
top:-100%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}
.coverUP::before {
content: "\A INFO";
white-space: pre;
text-align:center;
width: 100%;
height: 100%;
background: purple;
position:absolute;
top:0%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}
.coverDOWN::after {
content: "\A ZOOM";
white-space: pre;
text-align:center;
width: 100%;
height: 100%;
background: purple;
position:absolute;
top:0%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}
<div id="image" alt=image>
<a href="#">
<div class="coverUP"></div>
</a>
<a href="#">
<div class="coverDOWN"></div>
</a>
</div>
I'm trying to show a thumbnail caption on hover centered: aligned horizontal and vertical, but not successful.
In the fiddle you see a responsive thumbnail grid with on hover a caption. I gave it a dashed red border so you can see that it is not same size as the thumbnail. I can't get the title caption to be centered in the thumbnail. Maybe my thumbnail grid need a different build. Hope someone can help me.
Here is the fiddle
#content {
position: relative;
display: inline-block;
margin: 110px 40px 100px 40px;
background-color: transparent;
}
.col-25 {
position: relative;
float: left;
width: 25%;
margin: 0;
}
.thumb {
display: block;
margin: 10px;
}
.col-25 img {
width: 100%;
height: auto;
}
.col-25 a:hover img {
opacity: 0.1;
}
.caption {
position: absolute;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:100%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.col-25 a:hover .caption {
opacity: 1;
}
http://jsfiddle.net/a0zwecou/14/
I have added an inner div to caption and give it a margin height of 25%. Remove the margin for extremely small width size in your media query.
<div class="caption">
<div class="inner-caption">
<h3>Untitled for now</h3>
<p>Caption</p>
</div>
</div>
CSS -
.inner-caption{margin-top:25%;}
JSFIIDLE
only by changing the height and adding padding to caption class.
.caption {
position: absolute;
padding-top:25%;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:60%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
Try this,
.thumb:hover{border:1px dashed red;background-color:red;}
.caption {
position: absolute;
top:40%;
left:0;
/*border: dashed 1px red;*/ //remove it
width:100%;
/*height:100%;*/ // remove it
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
Fiddle : http://jsfiddle.net/a0zwecou/20/
see the fiddle here:
http://jsfiddle.net/a0zwecou/13/
and add css:
.caption h3 {
margin-top: 59px;
}
You can simply wrap your caption inside another div and centered that with transate(with all prefixes of course), OR you can simply center that using tables (table + table-cell)
HERE THE PEN, hover the first.
.insideCap{
background: red;
top: 50%;
position: absolute;
width: 100%;
transform: translateY(-50%);
}
OTHER WAY:
parent{
dispaly:table;
}
son{
display: table-cell;
vertical-align: middle;
}
you can try this:
<div id="content">
HTML:
Add this div:
<div class="col-25">
<a class="thumb" href="#">
<img src="http://fakeimg.pl/500x310/999/">
<div class="caption"><div class="caption-text"><h3>Untitled for now</h3><p>Caption</p></div></div>
</a>
</div>
CSS:
add this css in your style:
.caption-text {
left: 0;
position: absolute;
right: 0;
top: 32%;
}
SEE JS Fiddle DEMO