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
Related
I was trying to make it possible that if an 'user' hovers over an image than some information of that particular image is shown, this seems to work, but when removing 'the pointer' off the image, my whole website gets a green background-color. I've tried many things like: setting the 'position' of the information in absolute and Trying to do it without any background-color when hovering over the image, but the 'information' is shown in a different position on my website, instead of the wanted position. I Hope I can be helped further!
.Fiat500e,
.AIWAYS-U5,
.AUDI-Q4 {
width: 250px;
height: 240px;
padding-top: 30px;
padding-bottom: 30px;
border-radius: 50px;
}
.Citroene-Jumpy,
.Renault-Twizy,
.KIA-EV6 {
width: 250px;
height: 240px;
padding-top: 30px;
padding-bottom: 30px;
border-radius: 50px;
}
.Hyundai-Ioniq,
.Cupra-Born,
.MG-Marvel {
width: 250px;
height: 240px;
padding-top: 30px;
padding-bottom: 30px;
border-radius: 50px;
}
.Fiat500e:hover,
.Citroene-Jumpy:hover,
.Hyundai-Ioniq:hover,
.img__wrap:hover,
.AIWAYS-U5:hover,
.Renault-Twizy:hover,
.Cupra-Born:hover {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.img__description {
margin-top: 30px;
margin-bottom: 35px;
background: rgba(0, 207, 52, 0.72);
color: #fff;
visibility: hidden;
opacity: 10;
border-radius: 50px;
font-weight: 700;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__description {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
.ImagesCars {
padding-left: 50px;
padding-top: 40px;
padding-bottom: 50px;
padding-right: 50px;
}
#Achtergrond-Cars {
background-color: white;
margin-right: 50px;
margin-left: 50px;
border-radius: 25px;
}
<div id="Achtergrond-Cars">
<div style="display:inline-table;" class="ImagesCars">
<div class="img__wrap">
<img src="https://via.placeholder.com/200" class="Fiat500e">
<p class="img__description"><br><strong>Fiat 500e</strong><br><br><strong>Price: €24.900</strong><br><strong>Radius of action: 180km</strong><br><strong>Battery capacity: 24 kWh</strong><br><strong>Acceleration: 9,5s</strong><br><strong>Fast charge: 23min</strong><br><strong>Seats: 4</strong></p>
</div>
</div>
</div>
Found the solution by myself: While using position:absolute; on .img__description, but this shouldn't be the case for img__wrap the position must be: position:relative
.img__description {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}
.img__wrap {
position:relative;
}
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>
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>
I'm trying to make an image clickable so that I can use it as a button to download a PDF although I feel like I'm over-thinking this and confusing myself.
An example of the code I've used:
<div id="name"></div>
The div id is then used with CSS to display the image as I also wanted a hover effect so the user has some sort of feedback when on the button.
#name {
background-image: url('standardimage.jpg');
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
}
#name:hover {
background-image: url('hoverimage.jpg');
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
cursor: pointer;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
Any help would be appreciated thank you!
So the problem you are facing is the the link (the <a> tag) is the actual button but that one has no size cause it's kind of empty. See this code snippet. The <a> tag has a red border all around but there is nothing which fills it up ...
#name {
background-image: url(http://lorempixel.com/400/200/sports/1/);
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
}
#name:hover {
background-image: url(http://lorempixel.com/400/200/sports/2/);
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
cursor: pointer;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
#name a {
border:solid 1px red;
background-color: orange;
z-index: 999;
}
<div id="name"></div>
So if you set all those styles you had to the <a> tag and add display: inline-block; then it will work see here:
#name a {
display: inline-block; /* add this line */
background-image: url(http://lorempixel.com/400/200/sports/1/);
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
}
#name a:hover {
background-image: url(http://lorempixel.com/400/200/sports/2/);
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
cursor: pointer;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
#name a {
border:solid 1px red;
background-color: orange;
z-index: 999;
}
<div id="name"></div>
I'm having trouble using the ease function in CSS.
I have an image and when you hover over it I want it to ease to get bigger and show another div.
<div class="info1">
<img src="info.png">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
</div>
The CSS
.infoh {
width: 180px;
height: 180px;
display: none;
position: absolute;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
z-index: 1;
margin-left: -80px;
margin-top: -33px;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover .infoh {
display: block;
}
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
margin-left: 19.5%;
margin-top: -1.5%
}
I tried placing it on the image but that didn't work, then I tried on each div, and couldn't get it to ease. It just pops up.
.info1 img {
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
I'm not exactly sure of the effect you're after, but as #Paulie_D said, you're probably looking at using visibility and opacity.
Here's some code to try out, and at least that should give you something to work with.
(I also changed the order of your HTML a bit)
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
}
.info1 img {
width: 32px;
height: 32px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
.infoh {
position: absolute;
visibility: hidden;
opacity: 0;
z-index: 1;
width: 180px;
height: 180px;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
-webkit-transition: all 1s; /*Safari*/
transition: all 1s;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover img {
width: 300px;
height: 300px;
}
.info1:hover .infoh {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 1s; /*Safari*/
transition-delay: 1s;
}
<div class="info1">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
<img src="https://unsplash.it/300/300">
</div>
Hope this helps, and good luck!