I have a button that goes up when hovered. The transition time is supposed to be 1 second but it's not working. Here is the code:
<style>
#talk-to-us {
padding: 10px!important;
height: 43px!important;
width: 148px!important;
background-color: #0ee9f5!important;
display: inline-auto!important;
margin-right: 5px;
position: relative;
transition: top ease 1.0s; /*this is not working*/
}
#talk-to-us:hover {
top: -10px;
text-decoration:underline;
}
#link {
color: white!important;
font-size: 14px!important;
padding: 10px!important;
}
</style>
<button id="talk-to-us">
<b>
<a id="link" href="#">TALK TO US!</a>
</b>
</button>
Any idea what the cause could be?
If you need a transition from something to anything... first you need to give the "something" the transition property. So just add top:0 to the origin. like this:
<style>
#talk-to-us {
padding: 10px!important;
height: 43px!important;
width: 148px!important;
background-color: #0ee9f5!important;
display: inline-auto!important;
margin-right: 5px;
position: relative;
transition: top ease 1.0s; /*this is not working*/
top:0;
}
#talk-to-us:hover {
top: -10px;
text-decoration:underline;
}
#link {
color: white!important;
font-size: 14px!important;
padding: 10px!important;
}
</style>
<button id="talk-to-us">
<b>
<a id="link" href="#">TALK TO US!</a>
</b>
</button>
Related
I'm working on my very own website and I used this codepen
https://codepen.io/nikolamitic/pen/vpNoNq to create an animation on my name.
It works fine until I want to reduce the line-height of my elements without they hide each other (see the "j" and "p" caracters).
You can take a look here :
h1{
display:inline-block;
font-family: sans-serif;
font-size: 110px;
letter-spacing: 3px;
margin:0;
line-height: 90px;
}
h1 p{margin:0;}
/*************************************************/
/************* LETTER ANIMATION HOVER ************/
/* Thanks to https://codepen.io/nikolamitic/pen/vpNoNq */
.letter-anim{
position: relative;
color: #fff;
background-color: #222;
overflow: hidden;
cursor: pointer;
}
.letter-anim .letter-anim-dynamic,
.letter-anim .letter-anim-dynamic p {
display: flex;
justify-content: left;
align-items: center;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 2;
transition: all ease 0.7s;
}
.letter-anim .letter-anim-dynamic{
background-color: #fff;
color: #222;
overflow: hidden;
}
.letter-anim.active .letter-anim-dynamic,
.letter-anim:hover .letter-anim-dynamic {
transform: translateX(100%);
}
.letter-anim.active .letter-anim-dynamic p,
.letter-anim:hover .letter-anim-dynamic p {
transform: translateX(-100%);
}
.letter-anim-static{
font-size: 76px;
}
<h1 class="letter-anim h1-firstname">
<span class="letter-anim-static">
レ・ジェーン<br/>
</span>
<span class="letter-anim-dynamic">
<p>Lejeune</p>
</span>
</h1>
<br/>
<h1 class="letter-anim h1-lastname">
<span class="letter-anim-static">
ジョゼーフ<br/>
</span>
<span class="letter-anim-dynamic">
<p>Joseph</p>
</span>
</h1>
Thank for you help !
Just add margin-top : -10px in css for this css property letter-anim.letter-anim-dynamic p
<h1 class="letter-anim h1-firstname">
<span class="letter-anim-static">
レ・ジェーン<br/>
</span>
<span class="letter-anim-dynamic">
<p>Lejeune</p>
</span>
</h1>
<br/>
<h1 class="letter-anim h1-lastname">
<span class="letter-anim-static">
ジョゼーフ<br/>
</span>
<span class="letter-anim-dynamic">
<p>Joseph</p>
</span>
</h1>
h1{
display:inline-block;
font-family: sans-serif;
font-size: 110px;
letter-spacing: 3px;
margin:0;
line-height: 90px;
}
h1 p{margin:0;}
/*************************************************/
/************* LETTER ANIMATION HOVER ************/
/* Thanks to https://codepen.io/nikolamitic/pen/vpNoNq */
.letter-anim{
position: relative;
color: #fff;
background-color: #222;
overflow: hidden;
cursor: pointer;
}
.letter-anim .letter-anim-dynamic,
.letter-anim .letter-anim-dynamic p {
display: flex;
justify-content: left;
align-items: center;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 2;
transition: all ease 0.7s;
margin-top: -10px;
}
.letter-anim .letter-anim-dynamic{
background-color: #fff;
color: #222;
overflow: hidden;
}
.letter-anim.active .letter-anim-dynamic,
.letter-anim:hover .letter-anim-dynamic {
transform: translateX(100%);
}
.letter-anim.active .letter-anim-dynamic p,
.letter-anim:hover .letter-anim-dynamic p {
transform: translateX(-100%);
}
.letter-anim-static{
font-size: 76px;
}
It looks like the container for the h1 is just bit too small for the characters that are inside.
Try adding a simple padding:10px to h1 and the container should have more space for them.
I have a hidden sidebar menu on my website, if I open my website on my desktop, my hidden sidebar has 100px width (not full), so to reveal it all you must do is hover over it. If I open my website on a mobile device, my hidden sidebar has no width, and I must click the button to reveal the sidebar.
HTML:
<div id="mySidenav" class="sidenav sidenav-wrapper">
<img class="logo1" src="../img/logo1.png"><br><br>
Home
About
Contact
</div>
<div id="contoh" class="content-section-b">
<div class="mobiletoggle">
<label class="fa fa-bars" for="showblock"></label>
<input type="checkbox" id="showblock" />
</div>
</div>
In the code above I use checkbox to change 'click', because I just want to use CSS.
CSS:
.sidenav {
height: 100%;
width: 100px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.8s;
}
.logo1 {
height: 10%;
width: auto;
padding-left: 20px;
transition: 0.8s;
}
.sidenav:hover {
width: 250px;
transition: 0.8s;
}
.sidenav:hover ~ #contoh {
background-color: rgba(0,0,0,0.4);
filter: grayscale(100%);
}
.sidenav:hover .logo1 {
height: auto;
width: 95%;
padding-left: 10px;
transition: 0.8s;
}
.sidenav a {
float:left;
width:100%;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
opacity: 0;
transition: opacity 1300ms
}
.sidenav a:hover, .offcanvas a:focus {
color: #f1f1f1;
background-color:#5fa2db;
font-size: 30px;
}
#showblock {
display: none;
}
#media screen and (min-width:768px) {
.mobiletoggle {
display:none;
}
}
#media screen and (max-width:767px) {
.sidenav {
width:0px;
}
#showblock:checked + .sidenav {
width: 250px;
transition: 0.8s;
}
}
In the code above I used :checked, it's just a little bit different if I use :active. The problem is why my :checked/:active did not work? I looked into this jsFiddle, and it works fine, so why can't I use it? Any suggestions?
As per your CSS, modify your HTML to:
<input type="checkbox" id="showblock">
<div id="mySidenav" class="sidenav sidenav-wrapper">
<img class="logo1" src="../img/logo1.png"><br><br>
Home
About
Contact
</div>
<div id ="contoh" class="content-section-b">
<div class="mobiletoggle">
<label class="fa fa-bars" for="showblock"></label>
</div>
</div>
The input #showblock should be above the div #mySidenav in order for your CSS to work.
#showblock:checked + .sidenav {
width: 250px;
transition: 0.8s;
}
I have a div with social links and I want to make background color to fill whole div when hover any anchor with different color depending on which link is hovered.
For now background changes only beneath the anchor text.
I'm researching the way to fill whole parent with child's background color using pure CSS.
#social {
width: 400px;
height: 300px;
position: relative;
font-size: 36px;
font-weight: bold;
text-align: center;
}
a:link {
text-decoration: none;
transition: all .5s ease;
}
a:hover {
color: white;
}
#facebook:hover {
background: #3b5998;
}
#twitter:hover {
background: lightblue;
}
#google-plus:hover {
background: tomato;
}
#instagram:hover {
background: lightgreen;
}
<div id="social">
<a id="facebook" href="#"> <span>Facebook</span></a><br>
<a id="twitter" href="#"> <span>Twitter</span></a><br>
<a id="google-plus" href="#"> <span>Google plus</span></a><br>
<a id="instagram" href="#"> <span>Instagram</span></a><br>
</div>
For first sight It looks like another attempt to change style of parent element, but there is a way to achieve the effect using pure CSS.
The way is to use ::after pseudo-selector for anchor elements. We need to define it as absolutely positioned and set up to 100% dimensions of parent. Also to prevent overlapping of siblings, we need to decrease z-index attribute of pseudo-selector to render it beneath text.
Here is a snippet:
#social {
width: 400px;
height: 300px;
position: relative;
font-size: 36px;
font-weight: bold;
text-align: center;
}
a::after{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 20px;
background: transparent;
transition: background .5s ease;
}
a:link {
text-decoration: none;
transition: color .5s ease;
}
a:hover {
color: white;
}
#facebook:hover::after {
background: #3b5998;
}
#twitter:hover::after {
background: lightblue;
}
#google-plus:hover::after {
background: tomato;
}
#instagram:hover::after {
background: lightgreen;
}
<div id="social">
<a id="facebook" href="#"> <span>Facebook</span></a><br>
<a id="twitter" href="#"> <span>Twitter</span></a><br>
<a id="google-plus" href="#"> <span>Google plus</span></a><br>
<a id="instagram" href="#"> <span>Instagram</span></a><br>
</div>
I have tried everything, but I cannot manage to make the button smaller in the width and height.
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -4em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
If someone please can tell me a solution, I would be very grateful.
Change the CSS property of c--anim-btn class
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 24px; /* change height */
font: normal normal 700 1em/1.6em Arial, sans-serif;
overflow: hidden;
width: 100px; /* change width */
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -1.6em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
you need to adjust line height and margin top after change height because of text seen. Comment out onn css please take a look .c--anim-btn and .c--anim-btn:hover
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 128px;
font: normal normal 700 1em/8em Arial,sans-serif; /* 1em/8em means font-size/ line-height */
overflow: hidden;
width: 500px;
background-color: #3b5998;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -8em; /*Here you need to adjust after line-height change */
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
I am having header and subheader in my app. I have created html that looks like this:
<ion-header-bar class="bar-dark">
<a ui-sref="main.logout" class="button button-icon icon ion-navicon">
</a>
<a class="button button-icon icon ion-ios-search">
</a>
<a class="button button-icon icon ion-person">
</a>
</ion-header-bar>
<ion-header-bar class="bar-subheader bar-dark">
<a href="#">Populært
</a>
<a href="#">Siste
</a>
</ion-header-bar>
And when I am testing the app in the browser (chrome) it looks almost as I want it to look, but when I use emulator for ios, header and subheader appear bigger than what they should.
This is the screenshot from browser:
And this is the screenshot taken from emulator:
This is my scss file for this page:
.bar.bar-dark{
display: inline-block;
height: 45px;
padding-top:0;
background-color: $dark-background-color;
color:$light;
border-color: $dark-background-color;
background-image: none;
.row{
padding-top:0;
.icon{
font-size: 2rem;
}
.ion-navicon{
font-size: 3rem;
}
.right{
padding-top:16px;
}
}
a{
color:$light;
text-decoration: none;
&:active{
color:$gray;
}
}
}
.bar-subheader {
top: 45px;
}
.has-subheader {
top: 90px;
}
.item-light {
.article{
img{
width: 100%;
}
h1 {
color: $light;
position: absolute;
bottom: 5rem;
text-align: center;
width: 100%;
margin: 0 auto;
font-size: 2rem;
padding: 0 10%;
}
}
.row{
padding:.7rem;
a{
font-size: 1.1rem;
i {
vertical-align: middle;
font-size: 2.1rem;
}
}
}
}
And this is my scss file for all pages:
body{
background-color: $dark-background-color;
}
.item {
border: 0;
}
.item-content {
padding:0!important;
}
.right{
text-align: right;
}
//Buttons
.button{
min-height: 60px;
&:active, &:hover{
border-color:transparent;
}
}
//Customizing Ionic Icons
.icon{
color:white;
vertical-align: middle;
}
.ion-ios-heart-outline, .ion-ios-heart {
font-size: 1.7rem;
color: $red;
}
.ion-ios-chatbubble, .ion-chevron-right {
font-size: 1.7rem;
color: $gray;
}
.ion-chevron-left {
font-size: 2rem;
color: $light;
margin: 10px;
position:absolute;
top:15px;
z-index:1;
}
.ion-social-facebook {
font-size: 1.7rem;
color: $gray;
}
.popup-head {
background-color : $dark-background-color;
border: 0;
.popup-title {
font-size: 16px;
}
}
Updated code
I have changed the classes to different names in hope to override the default bar-header class. This is my css:
.articles-header {
display: inline-block;
padding-top:0;
height: 45px;
background-color: $dark-background-color;
color:$light;
border-color: $dark-background-color;
background-image: none;
a{
color:$light;
text-decoration: none;
font-size: 3rem;
&:active{
color:$gray;
}
}
.right-icons {
float: right;
}
}
.articles-subheader {
top: 45px;
a {
font-size: 1rem;
}
.button:hover {
color:$light;
}
}
.has-subheader {
top: 90px;
}
And this is my html:
<div class="row articles-header">
<a ui-sref="main.logout" class="button button-icon icon ion-navicon-round">
</a>
<div class="right-icons">
<a class="button button-icon icon ion-ios-search-strong">
</a>
<a class="button button-icon icon ion-person">
</a>
</div>
</div>
<div class="row articles-subheader articles-header">
<a class="button button-icon" href="#" ng-click="ShowHideBulletpoint('siste')"><i class="ion-ios-circle-filled" ng-show="bulletpointSiste"></i> Siste
</a>
<a class="button button-icon" href="#" ng-click="ShowHideBulletpoint()"><i class="ion-ios-circle-filled" ng-show="bulletpointPopular"></i> Populært
</a>
</div>
But it finally worked well with suggestion by Tomislav. What I want know is if I was to change the height now, should I change it in the css Tomislav wrote, and to this values are just used to override but not actually change the height or should I change the height in my articles-header, articles-subheader classes?
Ionic uses platform detection to decide how tall the header should be.
So, to override it, you need to use the entire correct CSS selector.
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
height: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
margin-top: 19px !important; }
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: 20px; }
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
top: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
top: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
top: 108px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-tabs-top {
top: 113px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top {
top: 157px; }
.platform-ios.platform-cordova.status-bar-hide {
margin-bottom: 20px; }
in your ion-content add class = "has-subheader"i hope this can solve your problem