Okay, so I want my container to open up from the center to the specified width when on hover of the parent.
The problem is that I can't get it to not open up from the left. I want it to work similarly to this situation here.
If possible, I'd like the animation for the corners of the container to activate after it has done it's first animation.
body {
background: #4e4e4e;
}
#music {
position: absolute;
top: 5px;
left: calc(50% - 50px);
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 23px;
width: 210px;
margin-top: 8px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.music-container {
height: 23px;
width: 0px;
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-left: -85px;
margin-top: 8px;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font color="white" size="1">
jsfiddle can't load my music lol
</font>
</center>
</div>
</div>
You need to use transform property over-here to increase width from center for .music-container,
body {
background: #4e4e4e;
}
#music {
position: absolute;
top: 5px;
left: calc(50% - 50px);
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 23px;
width: 210px;
margin-top: 8px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.music-container {
height: 23px;
width: 0px;
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-top: 8px;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
left: 50%; /*Add this*/
transform: translate(-50%, 0); /*Add this*/
}
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font color="white" size="1">
jsfiddle can't load my music lol
</font>
</center>
</div>
</div>
You can achieve that transitioning transform: scale instead of width.
body {
background: #4e4e4e;
}
#music {
position: absolute;
top: 5px;
left: calc(50% - 50px);
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 23px;
width: 210px;
margin-top: 8px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
transform: scale(1);
}
.music-container {
height: 23px;
width: 210px;
transform: scale(0);
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-left: -85px;
margin-top: 8px;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font color="white" size="1">
jsfiddle can't load my music lol
</font>
</center>
</div>
</div>
Use this css instead of left: calc(50% - 50px); I add this css in #music id for center. and also add and change in css for hover please check this.
#music {
left:0;
right:0;
margin: 0 auto;
}
#music:hover .music-container {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.music-container {
height: 23px;
width: 210px;
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-left: -85px;
margin-top: 8px;
overflow: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
left:0;
right:0;
border-radius: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
body {
background: #4e4e4e;
}
#music {
position: absolute;
top: 5px;
left:0;
right:0;
margin: 0 auto;
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.music-container {
height: 23px;
width: 210px;
position: absolute;
background-color: #000;
padding-left: 10px;
border: 1px solid white;
margin-left: -85px;
margin-top: 8px;
overflow: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
left:0;
right:0;
border-radius: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font color="white" size="1">
jsfiddle can't load my music lol
</font>
</center>
</div>
</div>
Check out the following snippet, the middle box .strip is an inline-block so it 'grows' from center...
.holder{
width : 500px;
margin : 0px auto;
text-align : center;
font-family : arial;
}
.button{
display : inline-block;
padding : 3px;
background : #333;
color : #fff;
border-radius : 3px;
cursor : pointer;
}
.hover:hover .strip{
width : 100px;
}
.padd{ padding:3px; }
.strip{
box-sizing : border-box;
border-radius : 3px;
margin-top : 5px;
width : 0px;
display : inline-block;
overflow : hidden;
white-space : nowrap;
transition : all 0.3s ease-out;
background : #333;
color : #fff;
}
<div class="holder">
<div class="hover">
<div class="button">Hover Me</div>
<div class="container">
<div class="strip">
<div class="padd">Some Text</div>
</div>
</div>
</div>
</div>
Related
This issue is a little bit complicated. I am trying to position some images in the order you can in this fiddle, but I had to add a parent div for the images so they could work properly with an animated box that displays the names of the people the images represent. The issue lies with the div not lining up the way the images do as just being lone img tags. Any help with this would be extremely appreciated.
body {
background: #7d7d7d;
}
h2 {
font-family: Pacifico;
font-size: 10px;
font-style: normal;
font-variant: normal;
font-weight: 200;
color: white;
line-height: 0px;
}
#friends {
position: absolute;
width: 200px;
height: 20px;
top: 50px;
right: 200px;
padding-top: 4px;
border: 1px solid white;
z-index: -10;
background-color: #000;
font-family: arial;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#friends:hover {
height: 240px;
border-radius: 10px;
}
.peeps {
position: relative;
margin-top: 5px;
margin-right: 5px;
width: 50px;
height: 50px;
}
.sam, .ys, .kani, .ash, .adam, .lit, .tsun, .lara, .bath {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.sam:hover {
border-radius: 0;
box-shadow: 0px 0 15px #a2dfe0;
}
#name {
position: absolute;
margin-top: -20px;
height: 20px;
width: 0px;
opacity: 0;
vertical-align: middle;
line-height: 15px;
background-color: #000;
border: 1px solid white;
overflow: hidden;
z-index: -1;
left: 50%;
transform: translate(-50%, 0);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.peeps:hover #name {
margin-top: -85px;
height: 20px;
width: 50px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
<html>
<div id="friends">
<br><br><!-- jsfiddle doesn't like my text -->
<div class="peeps">
<img class="sam" src="http://usd.chatango.com/profileimg/s/a/samantha/thumb.jpg" />
<p id="name" style="text-align: center;">
<font color="white" size="1">Ugh</font>
</p>
</div>
<div class="peeps">
<img class="ys" src="http://usd.chatango.com/profileimg/y/s/ys/thumb.jpg">
<p id="name" style="text-align: center;">
<font color="white" size="1">Ugh</font>
</p>
</div>
<div class="peeps">
<img class="kani" src="http://usd.chatango.com/profileimg/k/a/kaninkiller/thumb.jpg">
<p id="name" style="text-align: center;">
<font color="white" size="1">Ugh</font>
</p>
</div>
</div>
</html>
If I understand your question correctly just set the .peeps class to display:inline-block;. Here is a snippet.
body {
background: #7d7d7d;
}
h2 {
font-family: Pacifico;
font-size: 10px;
font-style: normal;
font-variant: normal;
font-weight: 200;
color: white;
line-height: 0px;
}
#friends {
position: absolute;
width: 200px;
height: 20px;
top: 50px;
right: 200px;
padding-top: 4px;
border: 1px solid white;
z-index: -10;
background-color: #000;
font-family: arial;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#friends:hover {
height: 240px;
border-radius: 10px;
}
.peeps {
position: relative;
margin-top: 5px;
margin-right: 5px;
width: 50px;
height: 50px;
display:inline-block;
}
.sam, .ys, .kani, .ash, .adam, .lit, .tsun, .lara, .bath {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.sam:hover {
border-radius: 0;
box-shadow: 0px 0 15px #a2dfe0;
}
#name {
position: absolute;
margin-top: -20px;
height: 20px;
width: 0px;
opacity: 0;
vertical-align: middle;
line-height: 15px;
background-color: #000;
border: 1px solid white;
overflow: hidden;
z-index: -1;
left: 50%;
transform: translate(-50%, 0);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.peeps:hover #name {
margin-top: -85px;
height: 20px;
width: 50px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
<div id="friends">
<br><br> <!-- jsfiddle doesn't like my text -->
<img class="sam" src="http://usd.chatango.com/profileimg/s/a/samantha/thumb.jpg">
<img class="ys" src="http://usd.chatango.com/profileimg/y/s/ys/thumb.jpg">
<img class="kani" src="http://usd.chatango.com/profileimg/k/a/kaninkiller/thumb.jpg">
<img class="ash" src="http://usd.chatango.com/profileimg/m/u/multiplelovearrows/thumb.jpg">
<img class="adam" src="http://usd.chatango.com/profileimg/t/i/tiefier/thumb.jpg">
<img class="lit" src="http://usd.chatango.com/profileimg/l/i/littered/thumb.jpg">
<img class="tsun" src="http://usd.chatango.com/profileimg/n/i/nicholle/thumb.jpg">
<img class="lara" src="http://usd.chatango.com/profileimg/h/o/hopefulhero/thumb.jpg">
<img class="bath" src="http://usd.chatango.com/profileimg/m/a/maytimes/thumb.jpg">
</div>
I tried to put some contents over an image with some overlay effects, but it does not shows output as my needs. Also I don't know how to do overlay effects anyone can help me please.
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
<a href="" class="overlay-leftTop">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
Actually I need something like this
You should use background-image CSS property instead of <img> tag. And for effects use pseudo elements like :before.
Have a look at the snippet below:
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
display: block;
position: relative;
text-decoration: none;
width: 300px;
height: 300px;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0,0,0,0.3);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:hover {
text-decoration: none;
}
.overlay-leftTop:hover:before {
background: rgba(0,0,0,0.5);
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
</a>
Hope this helps!
I think this is what u want.
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
display: block;
position: relative;
text-decoration: none;
width: 300px;
height: 300px;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0,0,0,0.3);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:hover {
text-decoration: none;
}
.overlay-leftTop:hover:before {
background: rgba(0,0,0,0.5);
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
.view-btn{
position: absolute;
top: 180px;
font-size: 16px !important;
border: 2px solid #fff;
display: inline-block !important;
text-align: center;
padding: 10px 15px;
opacity: 0;
transition:all 350ms ease 0s;
}
.overlay-leftTop:hover .view-btn{
opacity:1;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
<span class="view-btn">View More</Span>
</div>
</div>
</div>
</a>
Please try this. I have added some css:
.img-wrap {
display: inline-block;
position: relative;
width: 386px;
}
.img-box:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
transform:scale(0);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
transform:scale(1);
}
.img-wrap:hover .overlay-leftTop{
opacity:1;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
display: block;
}
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity:0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap {
display: inline-block;
position: relative;
width: 386px;
}
.img-box:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
transform:scale(0);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
transform:scale(1);
}
.img-wrap:hover .overlay-leftTop{
opacity:1;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
display: block;
}
<div class="img-wrap">
<div class="img-box">
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
</div>
<a href="" class="overlay-leftTop">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
</a>
</div>
I was trying to figure out how to center my CSS transition animation with width only; which was solved.
The music player that I am using is acting strangely with the tranform:translate property. Before I implemented the transform:translate property, the music player worked correctly.
Problem : But when I started using it I couldn't click any of the buttons unless I either spammed them or right clicked into a menu then left clicked them; which you can see here : GIF example.
You can view this issue in action at : this demo page.
This is my code (used at demo page) :
CSS code :
body {
background-color: black;
}
#music {
position: absolute;
top: 140px;
left: 155px;
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 23px;
width: 210px;
margin-top: 8px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.music-container {
height: 23px;
width: 0px;
position: absolute;
background-color: #000;
border: 1px solid white;
margin-top: 8px;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
left: 50%;
transform: translate(-50%, 0);
}
HTML code :
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font size="1" color="white">
Music Player not supported. See link in SO to view.
</font>
</center>
</div>
</div>
I want a Button, with 2 elements in it, to slide the Background.
But I want both elements to center vertical and get height 100% even when the other element is bigger.
Here is the HTML
<button class="btn-cstm-slide">
<div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
<div class="btn-cstm-slide-text">
<span>Just a Testtest</span>
<br/>
<span>Let's see</span>
</div>
</button>
And here the CSS
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
height:100%;
min-height:100%;
margin: 0;
padding: 10px;
position: relative;
text-decoration: none;
background: #474f54;
color: #fff;
}
.btn-cstm-slide-text {
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text * {
position:relative;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
Demo
FIDDLE
Can you help me? :(
Is this what you had in mind?
https://jsfiddle.net/e07uc4kj/9/
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
padding: 10px;
min-width: 80px;
position: absolute;
top: 0px;
bottom: 0px;
text-decoration: none;
background: #474f54;
color: #fff;
vertical-align: middle;
}
.btn-cstm-slide-text {
margin-left: 100px;
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
I have a problem. On my website. I have a button and when I click it I want to send me to another link But it's working only if I push it on the lower half.
This is the code:
<div id="button" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'">
<div id="butttop" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
<div id="buttbottom" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
<div id="buttbody" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
<div id="buttfloor" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
</div>
#button {
height: 130px;
width: 300px;
margin-top:37%;
position: absolute;
left:50%;
margin-left: -150px;
cursor:pointer;
}
#button div {
position: absolute;
}
#buttfloor {
height: 50px;
width: 300px;
background: #34495e;
border-radius: 50%;
margin-top: 80px;
z-index: 1;
}
#butttop {
background: #e74c3c;
height: 40px;
width: 250px;
border-radius: 50%;
z-index:3;
margin-left: 25px;
-webkit-transition: all .2s;
-moz-transition: all .2s ;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
#buttbottom {
background: #c0392b;
height: 40px;
width: 250px;
border-radius: 50%;
margin-top: 80px;
margin-left: 25px;
z-index:2;
}
#buttbody {
background: #c0392b;
height: 80px;
width: 250px;
border-radius: 0;
margin-top: 20px;
margin-left: 25px;
-webkit-transition: all .2s;
-moz-transition: all .2s ;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
z-index:2;
}
#button:active #buttbody{
height: 40px;
margin-top: 60px;
}
#button:active #butttop{
margin-top: 40px;
}
If you get rid of these two:
#button:active #buttbody{
height: 40px;
margin-top: 60px;
}
#button:active #butttop{
margin-top: 40px;
}
It will be clickable. Here's a jsfiddle for it