I am trying to change a text in a button HERE. The transition in the color works fine, but the transition on the span positions do not work.
Here is my code:
<style>
#btnIniciarFacturacion{
width: 200px;
height: 30px;
}
#btnIniciarFacturacion {
position: relative;
-webkit-transition: 2s;
transition: 2s;
overflow: hidden;
}
.btnIniciarFacturacion-content {
position: absolute;
left:0;
top:0;
font-size: 20px;
font-weight: bolder;
}
#btnIniciarFacturacion:hover{
background-color: orange;
}
#btnIniciarFacturacion .btnIniciarFacturacion-top{
top:0;
}
#btnIniciarFacturacion:hover .btnIniciarFacturacion-top{
top:-50px;
}
#btnIniciarFacturacion .btnIniciarFacturacion-bottom {
top:50px;
}
#btnIniciarFacturacion:hover .btnIniciarFacturacion-bottom {
top:0px;
}
</style>
<button class="" id="btnIniciarFacturacion">
<span class="btnIniciarFacturacion-top btnIniciarFacturacion-content" id="spanTotalFacturado"> TOTAL !##</span>
<span class="btnIniciarFacturacion-bottom btnIniciarFacturacion-content">Iniciar Facturación</span>
</button>
You're missing the transition style on the span elements:
.btnIniciarFacturacion-content {
position: absolute;
left:0;
top:0;
font-size: 20px;
font-weight: bolder;
transition: 2s;
}
Related
I was trying to make an interactive hamburger icon and found a tutorial and the code for it on code pen. The problem is the code I found on code pen does not work on my machine, but it is generating results on code pen. Also, in the CSS, I could see some properties placed within other properties which I did not understand. Please see the code below.
HTML:
<div class="nav-icon cross">
<div class="span"></div>
</div>
CSS:
.nav-icon{
height:70px;
width:88px;
position:relative;
.span {
height:6px;
width:55px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:black;
transition:all 0.3s;
&::before,&::after {
height:6px;
width:100%;
background:black;
position:absolute;
content:"";
transition:all 0.3s;
}
&::after {
top:20px;
}
&::before {
top:-20px;
}
}
&.active .span::after {
top:0;
transform:rotate(45deg);
}
&.active .span::before {
top:0;
transform:rotate(-45deg);
}
&.active .span{
background:none;
}
}
Which you posted it's a SCSS and you have to compile it into CSS
You can read about the scss just following link
sass link
.nav-icon {
height: 70px;
width: 88px;
position: relative;
}
.nav-icon .span {
height: 6px;
width: 55px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: black;
transition: all 0.3s;
}
.nav-icon .span::before,
.nav-icon .span::after {
height: 6px;
width: 100%;
background: black;
position: absolute;
content: "";
transition: all 0.3s;
}
.nav-icon .span::after {
top: 20px;
}
.nav-icon .span::before {
top: -20px;
}
.nav-icon.active .span::after {
top: 0;
transform: rotate(45deg);
}
.nav-icon.active .span::before {
top: 0;
transform: rotate(-45deg);
}
.nav-icon.active .span {
background: none;
}
/*# sourceMappingURL=style.css.map */
<div class="nav-icon cross">
<div class="span"></div>
</div>
The ampersand (&) symbol in SASS represents a placeholder for the wrapper of the element you're selecting.
For example, if you have:
.paragraph {
color: blue;
&.active {
color: red;
}
}
is the same as writing
.paragraph {
color: blue;
}
.paragraph.active {
color: red;
}
I'm working in a module box which redirects the user to an external website.
I've managed to create the layout and the content is displayed properly, however when I added the hover effect, the div is no longer clickable and so does not redirect to the external website.
Here is my jsfiddle
And here is my code:
<div class="module-box">
<div class="module-dummy"></div>
<div class="module-body module-pinterest">
<a href="www.google.com">
<div class="module-pinterest-title">Some text</div>
<div class="module-pinterest-description">
Some other text</div>
</a>
</div>
and my CSS:
.module-box {
display: inline-block;
position: relative;
width: 100%;}
.module-dummy {
margin-top: 100%;}
.module-body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;}
.module-pinterest {
background-color: #7C56BE;}
.module-pinterest-title {
padding: 25px 25px 0px 25px;
color: #FFF;}
.module-pinterest-description {
padding: 25px 25px 0px 25px;
font-size: 22px;
line-height: 26px;
font-weight: bold;
color: #FFF;}
.module-pinterest:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.2);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;}
.module-pinterest:hover:after {
opacity:1;}
Thanks!!
Add pointer-events:none; to your .module-pinterest:hover:after css code, like so:
.module-pinterest:hover:after {
opacity: 1;
pointer-events:none;
}
Here is the JSFiddle demo
if you move all your .module-pinterest styles to the anchor, then it should work:
.module-pinterest a {
display:block;
width:100%;
height:100%;
background-color: #7C56BE;
}
.module-pinterest a:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.2);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.module-pinterest a:hover:after {
opacity:1;
}
Updated fiddle
Since you are using positioning for overlaying of color upon hover, convert your anchor to block and add position:relative and a z-index value:
.module-body a {
position: relative;
z-index: 9;
display:block;
}
Here is fiddle:
https://jsfiddle.net/kw5ybq9e/3/
Ive tried using z-index to over rule the absolute and relative positioning on the box hovers but it just doesn't work. Any body got any suggestions as to why? The links are there but to the side of the images rather than directly above.
HTML
<div id="container1">
<img src="images/blindsided1.jpg">
<div class="textbox">
<p id="title1">First Coding <br> Attempt</br></p>
<p id="text1"> This brief was my first attempt at designing a website.</p>
</div>
</div>
CSS
a:hover {
z-index: 99;
}
#container1 {
position:absolute;
float:left;
}
.textbox:hover {
opacity:1;
}
#title1 {
padding-top: 20px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:32px;
word-spacing:2px;
letter-spacing:1px;
text-decoration:underline;
}
#text1 {
padding-top:40px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:16px;
word-spacing:2px;
letter-spacing:1px;
}
.textbox {
width:361px;
height:362px;
position:absolute;
top:0;
left:0;
opacity:0;
border-radius:300px;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
You can wrap the whole hoverable div in the anchor tag, that way you can ensure that the hoverable div is clickable and that it points to the link that the image is referencing.
HTML
<div id="container1">
<a href="firstcoding.html">
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png">
<div class="textbox">
<p id="title1">First Coding
<br>Attempt</br>
</p>
<p id="text1">
This brief was my first attempt at designing a website.
</p>
</div>
</a>
</div>
CSS
a:hover {
z-index: 99;
}
.textbox:hover {
opacity:1;
}
#title1 {
padding-top: 20px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:32px;
word-spacing:2px;
letter-spacing:1px;
text-decoration:underline;
}
#text1 {
padding-top:40px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:16px;
word-spacing:2px;
letter-spacing:1px;
}
.textbox {
width:361px;
height:362px;
position:absolute;
top:0;
left:0;
opacity:0;
border-radius:300px;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
The absolutely positioned child is sitting on top of the anchor link so any pointer interaction would fail.
You could use pointer-events:none on that child which would allow events to pass through but browser support it not great.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a,
img {
display: block;
}
#container1 {
position: relative;
border: 1px solid red;
float: left;
}
#container1:hover .textbox {
opacity: 1;
}
#title1 {
padding-top: 20px;
text-align: center;
color: #FFF;
font-family: "bebas";
font-size: 32px;
word-spacing: 2px;
letter-spacing: 1px;
text-decoration: underline;
}
#text1 {
padding-top: 40px;
text-align: center;
color: #FFF;
font-family: "bebas";
font-size: 16px;
word-spacing: 2px;
letter-spacing: 1px;
}
.textbox {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
pointer-events: none;
}
<div id="container1">
<a href="firstcoding.html">
<img src="http://lorempixel.com/output/cats-h-c-361-362-10.jpg" />
</a>
<div class="textbox">
<p id="title1">First Coding
<br/>Attempt
</p>
<p id="text1">This brief was my first attempt at designing a website.</p>
</div>
You would do better to wrap the div inside the link and re-factor your code as suggested in the comments.
When I hover on the image, div(2) appears.
But I want div(2) to remain about x seconds even on mouse out.
I only want to use PURE CSS.
How can I do it?
jsFiddle
#basarilar {
float: right;
margin: 7px 357px;
width: 140px;
height: 24px;
position: relative;
z-index: 9999;
}
.yildiz {
height: 24px;
width: 24px;
background: url("http://www.kelimelerbenim.com/wp-content/themes/kelimelerbenim/images/yildiz.png") 0 0 no-repeat;
margin-left: 10px;
float: right;
transition: .50s all;
transition-delay: 5s;
}
.yildiz:hover {
background: url("http://www.kelimelerbenim.com/wp-content/themes/kelimelerbenim/images/yildiz-2.png") 0 0 no-repeat;
}
.aciklama {
display: none;
position: absolute;
width: 200px;
height: 70px;
z-index: 9999;
top: 48px;
right: 0px;
padding: 15px 15px;
font-weight: bold;
text-align: center;
}
#bumerang1 {
color: #ffffff;
background: #76ab01;
}
#bumerang:hover + #bumerang1 {
display: block;
}
#bumerang1:hover {
display: block;
}
<div id="basarilar">
<div id="bumerang" class="yildiz"></div>
<div id="bumerang1" class="aciklama">This is my DIV</div>
</div>
Christopher Pearson was right about using transition-delays, but you'll need to change a couple of other things as well.
#basarilar {
float:right;
margin:7px 357px;
width: 140px;
height: 24px;
position: relative;
z-index: 9999;
}
.yildiz {
height:64px;
width:64px;
background:url("http://i.stack.imgur.com/vNQ2g.png?s=64&g=1") no-repeat;
margin-left:10px;
float:right;
transition: .50s all;
transition-delay: 5s;
}
.yildiz:hover {
background:url("http://i.stack.imgur.com/vNQ2g.png?s=64&g=1") 0 0 no-repeat;
}
.aciklama {
visibility: hidden; /* use visibility rather than display */
position:absolute;
width: 200px;
height: 70px;
z-index: 9999;
top:48px;
right:0px;
padding: 15px 15px;
font-weight: bold;
text-align: center;
transition-delay: 3s; /* Set transition-delay to 3s, so the mouse out is delayed */
}
#bumerang1 {
color:#ffffff;
background: #76ab01;
}
#bumerang:hover + #bumerang1 {
visibility: visible; /* use visibility rather than display */
transition-delay: 0s; /* Set transition-delay to 0s, so the mouse over is still immediate */
}
#bumerang1:hover {
display:block;
}
<div id="basarilar">
<div id="bumerang" class="yildiz"></div>
<div id="bumerang1" class="aciklama">This is my DIV</div>
</div>
You will have to use transitions with the .transition-duration. See this thread for a similar application. You can also see the W3 schools transitions pages here.
I am using the following tutorial http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index_3.html as a hover effect for two images I have. When you hover over them though, only the magnifying glasses are linked, I would like it so after you hover the entire area is linked. Is it at all possible? I have been playing around with it but cannot get it to work. Any help would be greatly appreciated.
Here is the HTML
<div class="view third-effect">
<!-- Image goes here -->
<div class="mask"><a href="#" class="info" title="Full Image">
<span class="glyphicon glyphicon-search"></span>
</a></div>
<div class="content">
</div>
</div>
And here is the CSS
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info .glyphicon .glyphicon-search {
/* background:url(../img/link.png) center no-repeat; */
position: relative;
top: 1px;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
content: "\e006";
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.third-effect a.info .glyphicon .glyphicon-search {
position:relative;
top:70px; /* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
transition-delay: 0.3s;
}
This worked OK in my test:
Modified CSS:
.view a.info {
background:url(/images/link.png) center no-repeat;
/*display: inline-block;*/
text-decoration: none;
padding:0;
text-indent:-9999px;
/*width:20px;
height:20px;*/
display: block;
width: 300px;
height: 200px;
}
Also comment out the "border:100px" parts (there are two places I found):
/*border:100px solid rgba(0,0,0,0.7);*/
That's it, the full thumbnail can now be clicked, while the hover effect with mag glass remains as before.