I have a hover effect on div.overlay, so when hovered, it will fade out and back in. However, if I hover the <span> or <h2>, background does not change, and I'm struggling finding how to make anything hovered within the <a> to have the same effect. Any ideas?
.homepage-box {
position: relative;
width: 300px;
height: 300px;
}
.homepage-box h2 {
margin-bottom: 0;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 14%;
color: #ffffff;
font-size: 2em;
z-index: 3;
}
.homepage-box span.button {
position: absolute;
left: 0;
right: 0;
top: 50%;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.3em;
border: 1px solid #fff;
padding: 7px 20px;
font-weight: bold;
margin: 0 30%;
z-index: 3;
}
.homepage-box img {
margin: 0 0 10px 0;
z-index: 1;
}
.homepage-box div.over {
position: absolute;
height: 191px;
width: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.2);
top: 0;
-webkit-transition: background-color 500ms linear;
-moz-transition: background-color 500ms linear;
-o-transition: background-color 500ms linear;
-ms-transition: background-color 500ms linear;
transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
background: rgba(0, 0, 0, 0);
}
.homepage-box a {
color: #2B2B2C;
margin: 0 0 15px 0;
display: block;
}
<div class="homepage-box">
<a href="#">
<div class="over"></div>
<h2>Baby Bean Bags</h2>
<span class="button">shop now</span>
<img src="/images/companies/1/baby-beanbags.jpg">
<p>Perfect for a newborn baby & makes a lovely gift to new parents. Cute, safe & well designed baby beanbags.</p>
</a>
</div>
contain the content within the overlay div
.homepage-box {
position: relative;
width: 300px;
height: 300px;
}
.homepage-box h2 {
margin-bottom: 0;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 14%;
color: #ffffff;
font-size: 2em;
z-index: 3;
}
.homepage-box span.button {
position: absolute;
left: 0;
right: 0;
top: 50%;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.3em;
border: 1px solid #fff;
padding: 7px 20px;
font-weight: bold;
margin: 0 30%;
z-index: 3;
}
.homepage-box img {
margin: 0 0 10px 0;
z-index: 1;
}
.homepage-box div.over {
position: absolute;
height: 191px;
width: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.2);
top: 0;
-webkit-transition: background-color 500ms linear;
-moz-transition: background-color 500ms linear;
-o-transition: background-color 500ms linear;
-ms-transition: background-color 500ms linear;
transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
background: rgba(0, 0, 0, 0);
}
.homepage-box a {
color: #2B2B2C;
margin: 0 0 15px 0;
display: block;
}
<div class="homepage-box">
<a href="#">
<div class="over">
<h2>Baby Bean Bags</h2>
<span class="button">shop now</span>
<img src="/images/companies/1/baby-beanbags.jpg">
<p>Perfect for a newborn baby & makes a lovely gift to new parents. Cute, safe & well designed baby beanbags.</p>
</div>
</a>
</div>
Related
I'm trying to change the text on hover, it works, but I'm wondering why the text goes to the right when you unhover the div.
I want to make the same effect when you unhover the div. Is it because the position absolute? I'm pretty new to web development.
.article-title {
opacity: 1;
width: 24%;
position: absolute;
padding-bottom: 10px;
color: #ff0099;
font-size: 30px;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.article-desc {
width: 23%;
position: absolute;
opacity: 0;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.box-link {
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
height: 200px;
width: 25%;
text-align: center;
cursor: pointer;
transition: transform .5s, box-shadow .2s;
}
.box-link:hover {
transform: scale(1.15);
box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}
.box-link:hover .article-title {
width: 89%;
position: absolute;
opacity: 0;
}
.box-link:hover .article-desc {
width: 95%;
opacity: 1;
}
<div class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so many stunning Australian native flowers to choose from.</a>
</div>
Change your CSS to :
.article-title {
opacity: 1;
position: absolute;
padding-bottom: 10px;
color: #ff0099;
font-size: 30px;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.article-desc {
position: absolute;
opacity: 0;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.box-link {
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
height: 200px;
width: 25%;
text-align: center;
cursor: pointer;
transition: transform .5s, box-shadow .2s;
position: relative;
}
.box-link:hover {
transform: scale(1.15);
box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}
.box-link:hover .article-title {
position: absolute;
opacity: 0;
}
.box-link:hover .article-desc {
opacity: 1;
}
<div class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so
many stunning Australian native flowers to choose from.</a>
</div>
The idea is to make the parent position relative so that you no longer need width explicitly to containerize the childs.
I've just created a button. I've found a problem where my content doesn't fit on it's place.
Here is my code:
.btn-red {
display: inline-block;
padding: 13px 20px;
color: #fff;
text-decoration: none;
position: relative;
background: #f42f2c;
font: 10px "Oswald", sans-serif;
letter-spacing: 0.4em;
text-align: center;
text-indent: 2px;
text-transform: uppercase;
transition: color 0.1s linear 0.05s;
border-radius: 0;
border: 1px solid #f42f2c;
}
.btn-red:focus {
box-shadow:none !important;
}
.btn-red::before {
content: "READ MORE";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #f9f9ff;
color:#f42f2c !important;
z-index: 1;
opacity: 0;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn-red::after {
transition: border 0.1s linear 0.05s;
}
.btn-red .btn-red-inner {
position: relative;
z-index: 2;
}
.btn-red:hover {
transition: color 0.1s linear 0s;
text-decoration: none;
color: #f42f2c !important;
}
.btn-red:hover::before {
top: 0;
height: 100%;
opacity: 1;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn-red:hover::after {
transition: border 0.1s linear 0s;
}
<a href="o-nas.php" class="btn-red">
<span class="btn-inner">READ MORE</span>
</a>
I tried to add padding: 13px 20px to .btn-red::before, but it has some bugs and I don't know how to solve this.
I think I achieve the same thing that you wanted without using :before to control the button text. Look below:
.btn-red {
position: relative;
display: inline-flex;
box-sizing: border-box;
padding: 13px 20px;
text-decoration: none;
background-color: #f42f2c;
border: 1px solid #f42f2c;
}
.btn-red:before {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 0;
content: "";
background-color: #fff;
transform: translateY(-50%);
transition: height 0.2s ease-in-out;
}
.btn-red .btn-inner {
font: 10px "Oswald", sans-serif;
color: #fff;
line-height: 1em;
letter-spacing: 0.4em;
text-transform: uppercase;
z-index: 1;
transition: color 0.2s ease-in-out;
}
.btn-red:hover:before {
height: 100%;
}
.btn-red:hover .btn-inner {
color: #f42f2c;
}
<a class="btn-red" href="#" title="Read More">
<span class="btn-inner">Read more</span>
</a>
Hope this can help you anyway. If you have any doubt about the code, please, just let me know :)
Cheers!
I found this animated button at codepen, I changed a little bit and now want to add it to my code.
But I want the animation go backwards when the element is not hovered anymore. At the moment it goes again from top to bottom. But I wanted this:
Hover: Top to Bottom
End of Hover: Bottom to Top
I thought this is possible with :after:hover. But it doesn't worked and I'm not pretty sure if this is the correct way.
.btn {
border: 0;
padding: 0 24px;
display: block;
position: relative;
transition: border-bottom-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
text-align: center;
border-bottom: solid 3px;
height: 48px;
}
.btn:not(.btn-disabled):before {
content: '';
position: absolute;
left: 0px;
bottom: 0px;
height: 0px;
width: 100%;
z-index: 0;
transition: all 0.3s cubic-bezier(1, 1, 1, 1) 0s;
}
.btn:not(.btn-disabled):hover:before {
top: 0%;
bottom: auto;
height: 100%;
}
.btn span {
position: relative;
z-index: 2;
}
.btn:focus {
outline: 0;
}
.btn:not(.btn-disabled):hover {
color: #ff0080;
border-bottom-color: #ffffcc;
}
.btn:not(.btn-disabled):active {
border-bottom-color: #0040ff;
transition-delay: 0s;
transition-duration: 0.15s;
}
.btn-primary {
background-color: #ffffcc;
color: #ff0080;
}
.btn-primary:before {
background: #fff;
}
<button type="button" class="btn btn-primary">
<span>Small Button</span>
</button>
Actually my Code is in Sass but I changed it here for the demonstration.
To prevent the transition from starting from the top when unhovered, set top: 0 and height: 0 on the pseudo element when not hovered, and change the height to 100% when hovered. When the height moves from 0 to 100% the direction of the animation would be down, and when it goes from 100% to 0, the direction would be up.
.btn {
border: 0;
padding: 0 24px;
display: block;
position: relative;
transition: border-bottom-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
text-align: center;
border-bottom: solid 3px;
height: 48px;
}
.btn:not(.btn-disabled):before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
z-index: 0;
transition: all 0.3s cubic-bezier(1, 1, 1, 1) 0s;
}
.btn:not(.btn-disabled):hover:before {
height: 100%;
}
.btn span {
position: relative;
z-index: 2;
}
.btn:focus {
outline: 0;
}
.btn:not(.btn-disabled):hover {
color: #ff0080;
border-bottom-color: #ffffcc;
}
.btn:not(.btn-disabled):active {
border-bottom-color: #0040ff;
transition-delay: 0s;
transition-duration: 0.15s;
}
.btn-primary {
background-color: #ffffcc;
color: #ff0080;
}
.btn-primary:before {
background: #fff;
}
<button type="button" class="btn btn-primary"><span>Small Button</span></button>
Change the btn:before and provide
top: 0;
left: 0;
height: 0;
I would like to "draw" an outline around rectangle buttons, meaning I'd like for the border to transition but not fade in. I already have a bunch of effects on these buttons.. I tried to apply an already-made exemple of draw outline CSS but it didn't do anything..
Here's my code
function hoverIcons(classnm) {
document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}
function nothoverIcons(classnm) {
document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}
#menu {
position: fixed;
bottom: 20;
right: 20;
width: 80;
height: 30px;
background-color: Menu background;
z-index: 10;
}
#mainicons {
position: fixed;
bottom: 20px;
right: 193px;
text-align: center;
}
#mainicons i {
display: inline-block;
margin-top: 0;
margin-left: -3px;
height: 30px;
width: 50px;
padding: 10px;
color-color: Main icon;
background-color: Main icon background;
text-transform: uppercase;
font-size: 15px;
line-height: 30px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#mainicons i:hover {
color-color: Hover;
background-color: Main icon;
transform: scale(1.1);
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/*-- BEGINNING BORDER EFFECT (PASTED) --*/
#mainicons {
transition: color 0.25s;
box-sizing: border-box;
}
#mainicons::before, #mainicons::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
#mainicons::before, #mainicons::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
#mainicons::before {
top: 0;
left: 0;
}
#mainicons::after {
bottom: 0;
right: 0;
}
#mainicons:hover {
color: #97c5e0;
}
#mainicons:hover::before, #mainicons:hover::after {
width: 100%;
height: 100%;
}
#mainicons:hover::before {
border-top-color: #97c5e0;
border-right-color: #97c5e0;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
#mainicons:hover::after {
border-bottom-color: #97c5e0;
border-left-color: #97c5e0;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
/*-- BEGINNING BORDER EFFECT (PASTED) --*/
/* originally written in SCSS
#mainicons {
transition: color 0.25s;
box-sizing: border-box;
&::before,
&::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;}
&::before,
&::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
&::before {
top: 0;
left: 0;
}
&::after {
bottom: 0;
right: 0;
}
&:hover {
color: #97c5e0;
}
&:hover::before,
&:hover::after {
width: 100%;
height: 100%;
}
&:hover::before {
border-top-color: #97c5e0;
border-right-color: #97c5e0;
transition:
width 0.25s ease-out,
height 0.25s ease-out 0.25s;
}
&:hover::after {
border-bottom-color: #97c5e0;
border-left-color: #97c5e0;
transition:
border-color 0s ease-out 0.5s,
width 0.25s ease-out 0.5s,
height 0.25s ease-out 0.75s;
}
}
*/
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div id="menu">
<div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')">
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-pencil "></i>
<i class="fa fa-clock-o"></i>
</div>
</div>
I have to admit it's very complicated for me to understand what he/she tried to do for the outline thing (https://codepen.io/giana/pen/yYBpVY).. So if you have a better/easier way to do this, thanks a lot!!
your html seems funny - you have html for a center button and yet none appears??
you can use just 'purple' or 'blue' etc.. for colors if you don't want to use html codes/id you find it easier, you don't need to define these in your css - that dollar sign is usually used in jquery - i haven't seen it used in css before but that's just me, i won't say it can't be used [or i'd stand to be corrected]. EDIT: CSS vars are still experimental technology with no support in Chrome or IE (although supported in edge).. as there's no support in Chrome, I'd hold off using it for now
I adjusted your code somewhat. I added a display:block to the button code so now they display one under the other in the window. Remove this and they will display as the layout will display in your original code. For purposes of snippet/jsfiddle window it's just handier. I replaced the colours with the html colors that you had in your definitions but like i say, in future you can just say border-color:red etc.
Note that this is only meant as a guide. Adjust as you see fit!
button {
display: block;
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
&::before,
&::after {
box-sizing: inherit;
content: '';
position: relative;
width: 100%;
height: 100%;
}
}
.draw {
transition: color 0.25s;
border: 2px solid transparent;
height: 100%;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #60daaa;
border-color: #fbca67;
width: 100%;
}
.meet {
border-top-color: #fbca67;
border-right-color: #fbca67;
}
.meet::after {
top: 0;
left: 0;
}
.meet:hover {
color: #fbca67;
z-index: 1;
border-bottom-color: #fbca67!important;
border-left-color: #fbca67!important;
}
.center {
width: 200px;
height: 100px;
text-align: center;
padding: 10px;
border-style: solid;
border-top-width: 2px!important;
border-bottom-width: 2px!important;
border-color: #6477b9;
color: #6477b9;
}
.center:hover {
color: #FF0000;
border-left-width: 2px!important;
border-right-width: 2px!important;
z-index: 90!important;
}
.center:focus {
border: 3px dashed red;
color: forestgreen;
}
.spin {
width: 5em;
height: 5em;
padding: 0;
border-width: 2px;
border-style: solid;
border-color: transparent;
top: 0;
left: 0;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.thick {
color: #f45e61;
z-index: -1;
background: #ffffff;
border-color: #f45e61;
}
.thick:hover {
color: #fff;
font-weight: 700;
background: #f45e61;
}
.thick::after {
mix-blend-mode: color-dodge;
}
/* Page styling */
html {
background: #4b507a;
}
body {
background: #fefefe;
color: #4b507a;
font: 300 24px/1.5 Lato, sans-serif;
margin: 1em auto;
max-width: 36em;
padding: 1em 1em 2em;
text-align: center;
}
.buttons {
isolation: isolate;
}
h1 {
font-weight: 300;
font-size: 2.5em;
}
<!---<h1>CSS Border Transitions</1>-->
<section class="buttons">
<button class="draw">Draw</button>
<button class="draw meet">Draw Meet</button>
<button class="center">Center</button>
<button class="spin">Spin</button>
<button class="spin circle">Spin Circle</button>
<button class="spin thick">Spin Thick</button>
</section>
Fiddle here
oups, i finally understood, effect is actually set on the container and you wish to set it on the links.
You basicly need to update the selector .
example
function hoverIcons(classnm) {
// document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}
function nothoverIcons(classnm) {
// document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}
#menu {
position: fixed;
bottom: 20;
right: 20;
width: 80;
height: 30px;
background-color: Menu background;
z-index: 10;
}
#mainicons {
position: fixed;
bottom: 20px;
right: 193px;
text-align: center;
}
#mainicons a {
transition: color 0.25s;
display: inline-block;
position: relative;
margin: 0 25px;
padding: 10px 20px;
box-sizing: border-box;
}
a::before,
a::after {
content: '';
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
}
a::before,
a::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
a::before {
top: 0;
left: 0;
}
a::after {
bottom: 0;
right: 0;
}
a:hover {
color: #97c5e0;
}
a:hover::before,
a:hover::after {
width: 100%;
height: 100%;
}
a:hover::before {
border-top-color: #97c5e0;
border-right-color: #97c5e0;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
a:hover::after {
border-bottom-color: #97c5e0;
border-left-color: #97c5e0;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<div id="menu">
<div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')">
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-pencil "></i>
<i class="fa fa-clock-o"></i>
</div>
</div>
#mainicons a{ /* select here the links */
transition: color 0.25s;
box-sizing: border-box;
display:inline-block;
position:relative ;
margin:0 25px;
padding: 10px 20px;
box-sizing:content-box;
&::before,
&::after {
content: '';
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
}
&::before,
&::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
&::before {
top: 0;
left: 0;
}
&::after {
bottom: 0;
right: 0;
}
&:hover {
color: #97c5e0;
}
&:hover::before,
&:hover::after {
width: 100%;
height: 100%;
}
&:hover::before {
border-top-color: #97c5e0;
border-right-color: #97c5e0;
transition:
width 0.25s ease-out,
height 0.25s ease-out 0.25s;
}
&:hover::after {
border-bottom-color: #97c5e0;
border-left-color: #97c5e0;
transition:
border-color 0s ease-out 0.5s,
width 0.25s ease-out 0.5s,
height 0.25s ease-out 0.75s;
}
}
I created a pop up menu here: https://jsfiddle.net/qpbmyhor/
Now I want the pop out menu links to be clickable. Right now when you hover your mouse to it, it will just dissapper and its not clickable. Also how can make the whole canvas/menus RESPONSIVE?
Here's my CSS:
ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.icon-box a {display: block;}
/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.home h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #E74C3C;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #a7382d;
}
.icon-box.home a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.aboutme h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #1dd0ad;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #0d866e;
}
.icon-box.aboutme a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.portfolio h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #3498db;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #2177b1;
}
.icon-box.portfolio a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.blog h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f1c40f;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #b8960e;
}
.icon-box.blog a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.contact h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f39c12;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #bc780d;
}
.icon-box.contact a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
/*= MENU ICONS
--------------------------------------------------------*/
span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}
Any idea? if you could show me the JSFIDDLE SOLUTIONS too!
NOTE it must pop out at the bottom of the icon box.
you need to change z-index to 0 for icon-box class to achieve what you are looking for.
For instance,
.icon-box.aboutme h2, .icon-box.home h2, .icon-box.portfolio h2, .icon-box.blog h2, .icon-box.contact h2{
z-index:0;
}
Live demo
If you want to achieve this keeping the object at the top, solution as below.
Code:
.icon-box a {
padding: 120px;
}
Live demo - 2
Hope this helps.
Use like this, you no need to write css for each menu.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.icon-box a {display: block;}
/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box h2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #E74C3C;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #a7382d;
}
.icon-box a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
/*= MENU ICONS
--------------------------------------------------------*/
span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}
</style>
</head>
<body>
<div class="container">
<ul class="icon-menu">
<li class="icon-box home">
<a href="#">
<span class="icon home"></span>
<h2>Home</h2>
</a>
</li>
<li class="icon-box aboutme">
<a href="#">
<span class="icon aboutme"></span>
<h2>About Me</h2>
</a>
</li>
<li class="icon-box portfolio">
<a href="#">
<span class="icon portfolio"></span>
<h2>Portfolio</h2>
</a>
</li>
<li class="icon-box blog">
<a href="#">
<span class="icon blog"></span>
<h2>Blog</h2>
</a>
</li>
<li class="icon-box contact">
<a href="#">
<span class="icon contact"></span>
<h2>Contact</h2>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Please have a look on the link.
I just noticed that you are controlling the popover element with every li a:hover and you should avoid it.
I tried to optimize your code and I think it's better to control hover on li element instead of a tag. (It might be possible that you have some different requirement that's why you are controlling it on a:hover)
https://jsfiddle.net/ashubuddy/qpbmyhor/4/