html code..
<div>
<ul class="social-icon">
<li><a href="#" class="social-facebook"><i class="fa fa-facebook"></i></a</li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-dribbble"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-rss"></i></li>
</ul>
</div>
css code..
.social-icon {
text-align: center;
text-decoration: none;
position: fixed;
}
.social-icon li {
list-style: none;
display: inline-block;
float: left;
}
.social-icon a {
display: inline-block;
font-size: 18px;
line-height: 38px;
width: 35px;
border: 1px solid #f7f7f7;
border-left: 0;
text-decoration: none;
}
.social-icon a.social-facebook {
opacity: 0;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon a.social-facebook:hover {
background-color: #0e39d8;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.social-icon a:first-child {
border-left: 1px solid #f7f7f7;
}
.social-icon a i {
color: #d2d2db;
}
The problem is that.. I need one static icon and one hover icon... my static icon opacity was-0.. but i want to show static icon in same position and when hover the icon gonna be down and up.......please help me..... the fb icon not shown when hover its show.
Here is the jsfiddle link
Sorry for my bad English.
You try this
I have done it using CSS3 keyframes
CSS
.social-icon a:hover {
-webkit-animation: 0.3s popIn;
-moz-animation: 0.3s popIn;
animation: 0.3s popIn;
background-color: #0e39d8;
}
#-webkit-keyframes popIn
{
0% {-webkit-transform: scale(1)}
50% {-webkit-transform: scale(2)}
100% {-webkit-transform: scale(1); background-color: #0e39d8;
opacity: 1;}
}
#-moz-keyframes popIn
{
0% {-moz-transform: scale(1)}
50% {-moz-transform: scale(2)}
100% {-moz-transform: scale(1); background-color: #0e39d8;
opacity: 1;}
}
#keyframes popIn
{
0% {transform: scale(1)}
50% {transform: scale(2)}
100% {transform: scale(1); background-color: #0e39d8;
opacity: 1;}
}
What I usually do is:
create a tiny DIV element,
set a background to it using CSS (your image).
then create a :hover setting in CSS with a different background.
Why you set the opacity 0, that make your image trasparent.
if you want to see the static image you have to set opacity not 0 but 1 for see the image.
I do not quite understand what you want but give effect your varinat think that my version will help you
DEMO
DEMO 2
DEMO 3
.social-icon a {
opacity: 1;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.social-icon a:hover {
background-color: #0e39d8;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
Related
There is a cubic gallery of images and my requirement is that on mouse hover any image should scale in the middle of the screen. I went through some solutions but they scale image at the exact location it is currently present on the screen.
While the image is scaled all the remaining gallery should go in background.
Please suggest me an approach for doing this And please let me know in case of any code to be posted.
So as suggested by Joramanda on adding above suggestion this seems to be working fine. Below is the css so the left right top and z index were adjusted to generate the desired effect.
.polaroid {
width: 33%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
float: left;
border: thin;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
img {
width: 100%
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.container {
text-align: center;
padding: 10px 20px;
float: left;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.polaroid:HOVER {
position:absolute;
left: 20%;
right: 20%;
top:20%;
z-index:10;
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.9);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
Basically what I'm trying to do is have a transition with transform applied on the :hover:before element so that when you hover with your mouse over ava.png the :before element smoothly appears instead of instantly.
I've tried adding the transition code to the :hover:after class (as seen in the code below) and I tried one of the solutions I found on StackOverflow, changing :hover to :before and adding the content + transition to that class. Needless to say none of my attempts worked or I wouldn't be here right now. (:D)
If anyone could take the time to help me out that'd be highly appreciated, thanks!
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
To animate transition you need a to have some kind of a change in the elements properties. This means that the element should be part of the page, displayed (ie no display: none) and visible (no visibility: hidden), but somehow invisible / transparent (opacity: 0 for example).
In your case, you don't create the :before element unless you want to display it. To solve that render the :before with scale(0), and on over change it to scale(1):
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#slide1:hover:before {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
Was trying to put a left push menu on my site, but when I try to add more than 4 sidebar-item they just don't follow the animation. Otherwise the last item follow, so how can i fix it?
Click Run code and Full page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Left Push Menu</title>
<style>
/*#import url(https://fonts.googleapis.com/css?family=roboto); */
body, html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'roboto', sans-serif;
}
h1 { text-align:center; margin:50px auto; color:#fff;}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
z-index: 1;
left: 0;
background-color: #000000;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #008e00;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-left{
position: fixed;
left: 40px;
top: 20px;
}
.nav-right.visible-xs { z-index: 3; }
.hidden-xs { display: none; }
.middle { margin: 0 auto; }
/*nada*/
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/*nada*/
.nav-right.visible-xs .active .bar {
background-color: #000;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/*nada*/
.button.active .top {
-webkit-transform: translateY(15px) rotateZ(45deg);
-moz-transform: translateY(15px) rotateZ(45deg);
-ms-transform: translateY(15px) rotateZ(45deg);
-o-transform: translateY(15px) rotateZ(45deg);
transform: translateY(15px) rotateZ(45deg);
}
/*nada*/
.button.active .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
/*nada*/
.button.active .middle { width: 0; }
.move-to-right {
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
-ms-transform: translateX(400px);
-o-transform: translateX(400px);
transform: translateX(400px);
}
nav { padding-top: 30px; }
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
}
/*-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);*/
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item.active {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #008E00;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
right: 0;
background-color: #008e00;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before { width: 100%; }
#media (min-width: 480px) {
.nav-list { display: block; }
}
#media (min-width: 768px) {
.nav-right { position: absolute; }
.hidden-xs { display: block; }
.visible-xs { display: none; }
}
</style>
</head>
<body>
<!--<div class="nav-left visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>-->
<!-- nav-right -->
<main>
<nav>
<div class="nav-left hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<h1>Left Push Menu</h1>
<div class="jquery-script-ads" align="center">
</div>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">Consumption</li>
<li class="sidebar-item">Historic</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-right");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</body>
</html>
You have just applied only for 1st,2nd, 3rd and the last element in the css styling.
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
Just add the above remove the others
The transition styling explicitly applies to only the following "child" elements:
.sidebar-item:first-child {
/*...*/
}
.sidebar-item:nth-child(2) {
/*...*/
}
.sidebar-item:nth-child(3) {
/*...*/
}
.sidebar-item:last-child {
/*...*/
}
So if there's, say an nth-child(4), and nth-child(5), and so on then those don't have any transitions applied to them.
Add them:
.sidebar-item:nth-child(4) {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .8s ease-in-out;
}
/* and so on, changing values as necessary... */
That button changes "TE LAAT" into "NU BETALEN" on hover with CSS, which works like a charm. Now I want the "TE LAAT" text to change only when you click the "collapsible-header" div. So when that div becomes active (I added that class now, but the active class toggles when you click it.) the text in the button changes to NU BETALEN.
Basically change the "TE LAAT" into the data-hover or data-active "NU BETALEN" when the div collapsible-header also has the active class.
.collapsible-header.active {
background-color: #e4e4e4;
}
/* .button */
.button {
display: inline-block;
position: relative;
min-width: 7rem;
margin-top: 3.7em;
margin-right: 15px;
padding: 5 6px;
border: 3px solid #EE6E73;
border-radius: 2px;
overflow: hidden;
text-decoration: none;
font-size: 0.8rem;
font-weight: bold;
outline: none;
color: #fff;
background-color: #EE6E73;
font-family: 'Roboto', sans-serif;
line-height: 1.7rem !important;
}
.button span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.button:before,
.button:after {
content: '';
position: absolute;
top: ;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: .4s,opacity .6s;
-moz-transition: .4s,opacity .6s;
-o-transition: .4s,opacity .6s;
transition: .4s,opacity .6s;
}
/* :before */
.button:before {
content: attr(data-hover);
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
}
/* :after */
.button:after {
content: attr(data-active);
-webkit-transform: translate(150%,0);
-moz-transform: translate(150%,0);
-ms-transform: translate(150%,0);
-o-transform: translate(150%,0);
transform: translate(150%,0);
}
/* Span on :hover and :active */
.button:hover span,
.button:active span {
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
/*
We show :before pseudo-element on :hover
and :after pseudo-element on :active
*/
.button:hover:before,
.button:active:after {
opacity: 1;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
/*
We hide :before pseudo-element on :active
*/
.button:active:before {
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
<link href="https://raw.githubusercontent.com/Dogfalo/materialize/master/css/ghpages-materialize.css" rel="stylesheet"/>
<button class="button right" type="button" data-hover="NU BETALEN" data-active="NU BETALEN TWEE"><span>TE LAAT</span></button>
<div class="collapsible-header active">
<p>content</p>
</div>
You should just need to replace .button:hover/.button:active with .button.active in your CSS, then add the JS below to toggle its .active class:
$('.collapsible-header').click(function(){
$('.button').toggleClass('active');
});
I am working on information banners. There are few divs on top of each other with a hover mask on them. On hover they change their text. Sometimes the hover text will be longer than the parent, the div below the hovered one should move under the hover text.
div.quick-banner {
width: 440px;
margin: 0 0 0 15px;
position: relative;
}
div.quick-banner div.mask-banner {
width: 420px;
position: absolute;
top: 0;
left: 0;
padding: 10px;
text-align: center;
}
div.quick-banner div.mask-banner h2 {
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 3px;
background: rgba(0, 0, 0, 0.8);
margin: 0;
}
div.quick-banner div.mask-banner {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: #004f6e;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
div.quick-banner:hover div.mask-banner {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
div.quick-banner div.mask-banner h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
div.quick-banner div.mask-banner:hover h2,
div.quick-banner div.mask-banner:hover p,
div.quick-banner div.mask-banner:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
div.quick-banner div.mask-banner p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
<div class="quick-banner">
<div class="main-banner">
<h2>Head 1</h2>
<p>This is first text of first banner.</p>
</div>
<div class="mask-banner">
<h2>Head HOVER 1</h2>
<p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
</div>
</div>
<div class="quick-banner">
<div class="main-banner">
<h2>Head 2</h2>
<p>This is first text of first banner.</p>
</div>
<div class="mask-banner">
<h2>Head HOVER 2</h2>
<p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
</div>
</div>
On hover I change the opacity of main and mask banner, which is working but the second div is appearing over the hovered text.
Is there a solution (pure CSS would be best) to move the next div under the hover div based on relative height of the hover text?
You won't be able to use position: absolute; for .mask-banner as it will take it out of the document flow and the other elements will not be aware of it. You can get round this by:
Moving the hover detection to the parent .quick-banner
Keeping .mask-banner in the flow (don't use position: absolute;)
Hide the content of .main-banner when .quick-banner is hovered
To keep the animation intact you won't be able to hide mask-banner using display: none; so you can do this by using height: 0; and overflow: hidden; instead.
div.quick-banner {
width: 440px;
margin: 0 0 0 15px;
position: relative;
}
div.quick-banner div.mask-banner {
width: 420px;
position: relative; /*Change this*/
top: 0;
left: 0;
padding: 0; /*Change this*/
text-align: center;
height: 0; /*Add this*/
overflow: hidden; /*Add this*/
}
div.quick-banner div.mask-banner h2 {
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 3px;
background: rgba(0, 0, 0, 0.8);
margin: 0;
}
div.quick-banner div.mask-banner {
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: #004f6e;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
div.quick-banner:hover div.mask-banner {
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
height: auto; /*Add this*/
padding: 10px; /*Add this*/
}
div.quick-banner div.mask-banner h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/*Change this*/
div.quick-banner:hover div.mask-banner h2, div.quick-banner:hover div.mask-banner p, div.quick-banner:hover div.mask-banner a.info {
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
div.quick-banner div.mask-banner p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
/*Add this*/
div.quick-banner:hover div.main-banner {
display: none;
}
<div class="quick-banner">
<div class="main-banner">
<h2>Head 1</h2>
<p>This is first text of first banner.</p>
</div>
<div class="mask-banner">
<h2>Head HOVER 1</h2>
<p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
</div>
</div>
<div class="quick-banner">
<div class="main-banner">
<h2>Head 2</h2>
<p>This is first text of first banner.</p>
</div>
<div class="mask-banner">
<h2>Head HOVER 2</h2>
<p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
</div>
</div>
JS Fiddle: http://jsfiddle.net/xtfzgrcm/2/