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>
Related
I made a button with some text in it and I want the text to disappear on hover and an image to appear in its place. Here is the HTML code:
#facebook {
width: 200px;
height: 50px;
border-style: solid;
border-color: white;
border-width: 1px;
border-radius: 7px;
line-height: 50px;
display: table-cell;
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
#facebook:hover {
width: 200px;
height: 50px;
border-style: solid;
border-color: white;
line-height: 50px;
background: rgba(59, 89, 152, .6);
}
<a href="https://www.facebook.com">
<div id="facebook"><span id="text">Facebook</span>
</div>
</a>
So basically I want a Facebook logo to appear instead of text. I tried to do it alone, but I failed. Does anyone know how this can be done?
Something like that?
https://jsfiddle.net/d04pLr6q/
#facebook {
width: 200px;
height: 50px;
border-style: solid;
border-color: white;
border-width: 1px;
border-radius: 7px;
line-height: 50px;
display: table-cell;
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
background-color: rgba(59, 89, 152, 1);
overflow:hidden;
text-align: center;
color:white;
}
a{
text-decoration:none;
}
#facebook:hover{
width: 200px;
height: 50px;
border-style: solid;
border-color: white;
line-height: 50px;
background-image: url(http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png);
background-size: 100%;
background-position: center;
color: transparent;
}
You can replace this facebook img with any logo. Its not perfect but pure CSS :)
i suggest you don't use a div inside an a . it could cause errors. so i changed a bit your html structure ( the solution works the same with your html structure ) .
so i set the id #facebook directly on the a and if you want it to behave like a div just add display:block to a#facebook
second, i've hidden the text when hover with visibility:hidden, you can also use opacity:0 . in this case it won't matter.
keep in mind that you can use transition with opacity but not with visibility
then on :hover added a background-image to the #facebook element ( you can add whatever url you like )
let me know if it helps ;)
#facebook {
width: 200px;
height: 50px;
border-style: solid;
border-color: white;
border-width: 1px;
border-radius: 7px;
line-height: 50px;
display: table-cell;
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
background-position:center center;
}
#facebook:hover{
width: 200px;
height: 50px;
border-style: solid;
border-color: white;
line-height: 50px;
background-color: rgba(59, 89, 152, .6);
background-image:url("http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico");
background-repeat:no-repeat;
}
#facebook:hover #text {
visibility:hidden;
}
<span id="text">Facebook</span>
You need 2 blocks of hover CSS. See example below and adjust as needed.
#facebook {
width: 200px!important;
height: 50px!important;
border-style: solid;
border-color: white;
border-width: 1px;
border-radius: 7px;
line-height: 50px;
display: table-cell;
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
position: relative;
display: inline-block;
}
img {
width: auto;
height: 50px;
display: none;
}
#facebook:hover img {
display: block;
height: 50px;
width: auto;
}
#facebook:hover #text {
display: none;
}
#facebook img {
width: 100%;
height: auto;
}
<a href="https://www.facebook.com">
<div id="facebook">
<span id="text">Facebook</span>
<img src ="http://i65.tinypic.com/2evxmqs.jpg" width="150px" height="45px" />
</div></a>
#facebook {
width: 200px;
height: 50px;
border-style: solid;
border-color: white;
border-width: 1px;
border-radius: 7px;
line-height: 50px;
display: table-cell;
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
#facebook:hover {
width: 200px;
height: 50px;
border-style: solid;
border-color: white;
line-height: 50px;
background: rgba(59, 89, 152, .6);
}
#facebook span {
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
#facebook:hover span {
color: transparent;
}
<a href="https://www.facebook.com">
<div id="facebook"><span id="text">Facebook</span>
</div>
</a>
you can use JavaScript for that.
document.getElementById('facebook').onmouseover = function(){
document.getElementById('facebook').innerHTML = '';
document.getElementById('facebook').style.backgroundImage = 'url(pic.jpg)';
document.getElementById('facebook').style.backgroundSize = 'cover';
};
document.getElementById('facebook').onmouseout = function(){
document.getElementById('facebook').innerHTML = 'Facebook';
document.getElementById('facebook').style.backgroundImage = 'none';
};
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!
I'm trying to edit a link with icon to fade between colors. I'm using :before for background image which is a sprite, because I couldn't figure how to change the color of the icon using only css when it's only png file.
I found this post which might be an answer( CSS3 - Fade between 'background-position' of a sprite image) and tried to modify it to my needs but it's not working...
Here's the code and the codepen demo in action (http://codepen.io/kikibres/pen/KpjZKM):
HTML
<div id="button">Button</div>
CSS
#button{
display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
content: "";
display: inline-block;
vertical-align: middle;
/*float: left;*/
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 0px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
}
#button a:hover:before{
content: "";
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 -29px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
/*text-indent: -9999px;*/
/*transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;*/
opacity: 0;
}
/*#button a:hover:before
{
opacity: 0.4;
}*/
How do I fix it so that it'll fade from one color to another...
* Update *
With some help from others (thanks, everyone!), I was able to edit the code. However, it doesn't line up in the middle like I wanted. Here's the actual link that I'm using for a website. The first code displayed was just an example to see how I can make it work. Anyway, I finally separated the icon and the text by using span, but now I'm trying to tie them together by using "+" in the css, but it's not working. Here's the codepen code: http://codepen.io/kikibres/pen/GJbQKq
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
/*text-indent: 80px;*/
/*width: 100%;
height: 52px;*/
/*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a span {
position: relative;
display: inline-block;
/*top: 0; left: 0; bottom: 0; right: 0;*/
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
/*display: inline-block;*/
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button a span:hover:before {
opacity: 1;
}
As you can see from this new codepen code, if you hover over the icon, both the icon and the text work, but if you hover over the text, only the text works. How do I fix it?
You've to apply the different image styles on different DOM elements, once it's the anchor tag and the second one is the span (in my example), and then switch the opacity of the different positioned background. CodePen Link
SNIPPET
.button {
display: inline-block;
position: relative;
text-indent: 30px;
width: 36px;
height: 30px;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
text-decoration: none;
font-size: 1.5em;
transition: color 0.4s ease;
line-height:1.5em;
}
.button:hover{
color:#f68e07;
}
.button span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
background-position: 0 -29px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.button:hover span {
opacity: 1;
}
Button<span></span>
To change the color, you can incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
You have declared opacity: 0; for #button a:hover:before { ... }, that's why it doesn't work in your codepen demo.
I got it!!! Thanks everyone for their help! I was able to make it work!!!
Here's working codepen: http://codepen.io/kikibres/pen/LVKQxE
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a span {
position: relative;
display: inline-block;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button:hover a {
color: #f68e07;
}
#button:hover a span:before {
opacity: 1;
}
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
i am trying to animate a div when hovering on another div. Ihave following code
html
<div>
</div>
<div class="content">
</div>
css
div {
height: 100px;
width: 100px;
background: red;
transition: all 0.4s ease-in-out;
}
.content {
height: 20px;
width: 20px;
background: green;
display: none;
}
div:hover + .content{
display: block;
margin-top: -100px;
margin-left: 50px;
}
What i am trying to do is, i need to animate .content to margin-top: -100px and margin-left: 50px; from its default position, when the user is hover on one of these elements. But atm with this code it only works when the user hover on the .content and it animate the other way. (from margin-top: -100px and margin-left: 50px; to default position). Please excuse my english
jsfiddle-> http://jsfiddle.net/fTAUk/1/
You need to wrap the content in the div and use a child selector. Note I gave the larger div an id as well. Here is the css:
JS Fiddle
#box {
height: 100px;
width: 100px;
background: red;
position: absolute;
transition: all 0.4s ease-in-out;
}
#content {
width: 20px;
background: green;
height: 0;
transition: all 0.4s ease-in-out;
position: margin-top: -100px;
margin-left: 50px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 20px;
}