I have this simple hide/show toggle which fades in/out text when hovering. The only problem is, I don't want it to be invisble (because it takes up unnecessary space). But when I add display element the fade function doesn't work anymore.
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
#hover:hover+#stuff {
opacity: 1.0;
display: inline-block;
}
`
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
WITH FADE ANIMATION, but just hidden: jsfiddle
WITHOUT FADE ANIMATION, but appears when hovering and doesn't take up space jsfiddle
Is it possible to maintain the fade animation without the text just being invisible?
You can use max-height to remove the unwanted space
See code snippet bellow:
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
max-height:0;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
#hover:hover+#stuff {
opacity: 1.0;
max-height:100%;
}
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
And if you want it to always take no space, you can use absolute position to make go out of the flow of the document
See code snippet:
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
position:absolute;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
.wrapper{
position:relative;
}
#hover:hover + #stuff {
opacity: 1.0;
}
<div class="wrapper">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
<div>
I would wrap your divs in another box and then absolutely position your hidden text so it doesn't take up any space - comments in code to explain what is happening
/* add a container */
.container {
position: relative;
}
#stuff {
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
display: inline-block;
/* position stuff underneath the container */
position: absolute;
top: 100%;
/* give the background a colour so you can't see anything below */
background: #ffffff;
}
#hover {
width: 150px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
/* show stuff on hover of the container - so you can hover the stuff without it dissappearing */
.container:hover #stuff {
opacity: 1;
}
`
<div class="container">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
</div>
Some content below
My issue:
I've made myself an image map/interactive image of sorts and it's working perfectly on Chrome, safari and Firefox. However, when I try it on the dreaded internet explorer, it's really glitchy. The little points are supposed to expand into larger boxes, on internet explorer it either doesn't work or messes up in the process.
See the problem:
See this Fiddle,
See this website for a better idea (my code is active on here).
What part of my code could be causing this it to mess up on IE? Any help would be greatly appreciated!
HTML and CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'>
<style>
html
color: #e5e5e5;
text-align: center;
font-family: "Roboto", Helvetica, sans-serif;
}
body {
max-width: 1200px;
margin: 20px auto;
padding: 0 100px;
overflow-x: hidden;
}
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
div, img, footer {
position: relative;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
text-transform: uppercase;
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-weight: 300;
}
h1 {
font-size: 36pt;
}
h2 {
font-size: 24pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
margin-right: 12px;
margin-left: 12px;
}
strong {
font-weight: 900;
font-family: "Roboto Condensed", Helvetica, sans-serif;
color: #e5e5e5;
}
a {
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
font-family: "Roboto Condensed", Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #dff3fd;
}
a:visited {
color: #dff3fd;
}
li.active a, a:hover, a:active {
color: #e5e5e5;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centered-y {
position: inline-block;
width: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 1190px;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 3px solid #dff3fd;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
position: absolute;
margin-left: auto;
margin-right: auto;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 550px;
height: 400px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
color: #dff3fd;
}
</style>
</head>
<body>
<h1></h1>
<div class="distribution-map">
<button class="map-point" style="top:24%;left:26.5%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>details</p>
<iframe width="350" height="197" src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</button>
<button class="map-point" style="top:26%;left:49%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:27.3%;left:71.4%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:63.5%;left:31.5%">
<div class="content">
<div class="centered-y">
<h2>Another one</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:65%;left:56%">
<div class="content">
<div class="centered-y">
<h2>another one</h2>
<p>Details...</p>
</div>
</div>
</button>
<button class="map-point" style="top:68%;left:74%">
<div class="content">
<div class="centered-y">
<h2>Another</h2>
<p>Details...</p>
</div>
</div>
</button>
</div>
It seems that <=IE9 can not use transitions.
http://caniuse.com/#feat=css-transitions
There is a polyfill that might help though here: http://ecsstender.org/extensions/css3-transitions/index.html
I want to make an effect that would trigger my button transition when I hover the outer div box (parent) that already has its own transition. Can this be done with css or is it in need of some javascript?
My example:
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
position: absolute;
margin-left: 56px;
}
.btn_ani:hover {
background: #ffffff;
color: #99745c;
opacity: 1;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.5s;
border:1px solid #99745c;
margin-top: 80px;
}
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>
It can be done with CSS. You could simply move the :hover state to the parent .box and the target the descendants like: .box:hover .btn_ani.
In this case elements can have their own transition value.
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
/* different transition from the parent */
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.7s;
position: absolute;
margin-left: 56px;
}
.box:hover .btn_ani {
background: #ffffff;
color: #99745c;
opacity: 1;
border:1px solid #99745c;
margin-top: 80px;
}
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>
If you would like to try some jQuery, you could use a solution such as this:
$('.box').hover(function(){
$('.btn_ani').toggleClass('margin');
});
With the css:
.margin{
margin-top:80px;
}
and here is an example!
I'm building an image overlay from right to left transition. The transition is working fine but the caption is 45% width of the image and I want the transition to stop at the end of caption width not continue till the end of image width.
This is my code
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>
http://jsfiddle.net/vhp2nL7k/
The transition should be 45% of the image according to caption width
As you want the transition to stop the end of caption, the absolute position of the caption at that time would be left = 100-(width of caption div)% = 55% in this case.
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 55%;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>
I have a DIV which its width is expanding on hover, and more text is displayed. The problem is that while the div is expanding evenly to both sides (using changing margins) the text is moving to the right like it is keeping its former position inside the div. This happens in chrome and IE but not in Firefox for some reason. I want it to stay at the center if possible. Can be seen at: http://wiki.doalogue.co.il/ while hovering the on the Doalogue wiki headline
the relevant HTML:
<div id="mf-banner-intro">
<h2>
<span class="mw-headline" id="DoAlogue_Wiki">
<big><i>headline:DoAlogue Wiki</i></big>
</span>
</h2>
<h3>
<span class="mw-headline">Second headline</span>
</h3>
<p>The apearing text</p>
<h4>
<span class="mw-headline">▼</span>
</h4>
</div>
The relevant CSS
#mf-banner-intro {
background: rgba(20,20,20,0.85);
margin: 40px 30% 25px 30%;
padding: 20px;
position: relative;
width: 40%;
font-size: 150%;
text-align: center;
opacity: 0.9;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#mf-banner-intro h2 {
font-size: 150%;
text-align: center;
line-height: 100%;
color: #FFF;
border-bottom: 1px solid #fff;
margin-bottom: -0.2em;}
#mf-banner-intro p {
color: #FFF;
opacity: 0;
font-size: larger;
padding: 1em 3em;
margin-bottom: -1em;
display: none;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;}
#mf-banner-intro:hover {
width: 50%;
margin: 40px 25% 25px 25%;
background-color: rgba(59,164,204,0.88);
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;}
#mf-banner-intro:hover p {
opacity: 1;
overflow: visible;
display: block;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
Thanks!