is it possible not to trigger the animation indefinitely when you move the cursor at the bottom of the button?
here's how it looks like -- gif and codepen
.container {
padding: 1rem;
}
.container .here {
text-decoration: none;
color: white;
background: darkgreen;
display: inline-block;
margin: 2rem;
padding: 1rem;
transition: all .1s;
}
.container .here:hover {
transform: translateY(-1.5rem) scale(1.5);
}
<div class="container">
<div class="here">hover here</div>
</div>
Make the button bigger at the bottom by adding a pseudo element and you will avoid the flicker:
.container {
padding: 1rem;
}
.container .here {
text-decoration: none;
color: white;
background: darkgreen;
display: inline-block;
margin: 2rem;
padding: 1rem;
transition: all .1s;
position:relative;
}
.container .here:before {
content:"";
position:absolute;
top:100%;
left:0;
right:0;
}
.container .here:hover {
transform: translateY(-1.5rem) scale(1.5);
}
.container .here:hover:before {
height:1.5rem;
}
<div class="container">
<div class="here">hover here</div>
</div>
Related
So this has been baffling me for a while now. I have set a particular media query at (max-width:480px). The problem is when my screen is slightly below 480px, the CSS does not work. However, at around 370px, it suddenly begins to work. Anyone out there who can help explain why this is happening to my code?
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
display: flex;
width: 90vw;
}
.panel {
background: no-repeat center center/cover;
flex: 0.5;
height: 80vh;
border-radius: 50px;
position: relative;
margin: 10px;
transition: flex 0.3s ease;
cursor: pointer;
}
.panel h3 {
font-size: 24px;
color: #fff;
position: absolute;
left: 10%;
bottom: 10%;
opacity: 0;
}
.container div:first-child {
background-image: url(/assets/ales-krivec-4miBe6zg5r0-unsplash.jpg);
}
.container div:nth-child(2) {
background-image: url(/assets/bailey-zindel-NRQV-hBF10M-unsplash.jpg);
}
.container div:nth-child(3) {
background-image: url(/assets/ken-cheung-KonWFWUaAuk-unsplash.jpg);
}
.container div:nth-child(4) {
background-image: url(/assets/luca-bravo-zAjdgNXsMeg-unsplash.jpg);
}
.container div:last-child {
background-image: url(/assets/pietro-de-grandi-T7K4aEPoGGk-unsplash.jpg);
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in;
}
#media (max-width: 480px) {
.container {
width: 100vw;
}
.panel:nth-of-type(4),
.panel:nth-of-type(5) {
display: none;
}
}
<body>
<div class="container">
<div class="panel active">
<h3>All you gotta do is call</h3>
</div>
<div class="panel">
<h3>Winter</h3>
</div>
<div class="panel">
<h3>Spring</h3>
</div>
<div class="panel">
<h3>Summer</h3>
</div>
<div class="panel">
<h3>Fall</h3>
</div>
</div>
<script src="./js/app.js"></script>
</body>
Thanks a lot for the guidance!
I have an issue in CSS while trying to fade in some elements in CSS.
I would like to show with a fade in effect some elements in my image right after the rotate transition but it doesn't work.
I did a jsfiddle and you can activate the effect with an hover on the image :
https://jsfiddle.net/egfjp36h/
Here's my HTML code :
<div class="flip-box">
<div class="fut-player-card card-display">
<div class="fut-front">
<div class="player-card-top player-card-top-color">
<div class="player-master-info">
<div class="player-rating">
<span>97</span>
</div>
<div class="player-position">
<span>RW</span>
</div>
<div class="player-nation">
<img src="https://selimdoyranli.com/cdn/fut_card/img/argentina.svg" alt="Argentina" draggable="false">
</div>
<div class="player-club">
<img src="https://selimdoyranli.com/cdn/fut_card/img/barcelona.svg" alt="Barcelona" draggable="false">
</div>
</div>
<div class="player-picture">
<img src="https://selimdoyranli.com/cdn/fut_card/img/messi.png" alt="Messi" draggable="false">
</div>
</div>
<div class="player-card-bottom">
<div class="player-info player-info-color">
<div class="player-name player-name-border"><span>MESSI</span></div>
<div class="player-features">
<div class="player-features-col player-features-col-border">
<span>
<div class="player-feature-value">97</div>
<div class="player-feature-title">RDV</div>
</span>
<span>
<div class="player-feature-value">95</div>
<div class="player-feature-title">CTR</div>
</span>
<span>
<div class="player-feature-value">94</div>
<div class="player-feature-title">TRANSF</div>
</span>
</div>
<div class="player-features-col player-features-col-border">
<span>
<div class="player-feature-value">99K€</div>
<div class="player-feature-title">CA</div>
</span>
<span>
<div class="player-feature-value">35</div>
<div class="player-feature-title">DEF</div>
</span>
<span>
<div class="player-feature-value">68</div>
<div class="player-feature-title">PHY</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And my CSS :
.fut-player-card{
position: relative;
width:300px;
height:485px;
background-position: center center;
background-size:100% 100%;
background-repeat: no-repeat;
padding:5.9rem 0;
z-index: 2;
transition: 200ms ease-in;
margin-left: auto;
margin-right: auto;
}
.card-display{
background-image: url(https://selimdoyranli.com/cdn/fut_card/img/card_bg.png);
}
.card-display2{
background-image: url("img/fut/fut1.png");
}
.card-display3{
background-image: url("img/fut/fut2.png");
}
.card-display4{
background-image: url("img/fut/fut3.png");
}
.player-card-top{
position: relative;
display: flex;
padding: 0 3.5rem;
}
.player-master-info{
position: absolute;
line-height: 3.2rem;
font-weight: 300;
padding: 3rem 0;
text-transform: uppercase;
}
.player-rating{
font-size:3rem;
}
.player-position{
font-size: 2.2rem;
}
.player-nation{
display: block;
width:3rem;
height:25px;
margin: 0.5rem 0;
}
.player-nation img{
width:100%;
height: 100%;
object-fit: contain;
}
.player-club{
display: block;
width:3.1rem;
height:40px;
}
.player-club img{
width:100%;
height: 100%;
object-fit: contain;
}
.player-picture{
width:200px;
height:200px;
margin: 0 auto;
overflow: hidden;
}
.player-picture img{
width:100%;
height:100%;
object-fit: contain;
position: relative;
right: -1.5rem;
bottom: 0;
}
.player-extra{
position: absolute;
right:0;
bottom: -0.5rem;
overflow: hidden;
font-size:1rem;
font-weight: 700;
text-transform: uppercase;
width:100%;
height:2rem;
padding:0 1.5rem;
text-align: right;
background:none;
}
.player-extra span{
margin-left: 0.6rem;
text-shadow:2px 2px #333;
}
.player-card-bottom{
position: relative;
}
.player-info{
display: block;
padding:1rem 0;
width:90%;
margin:0 auto;
height: auto;
position: relative;
z-index: 2;
}
.player-info-color, .player-card-top-color{
color:#e9cc74;
}
.player-info-color2, .player-card-top-color2{
color:#130d40;
}
.player-name{
width:100%;
display: block;
text-align: center;
font-size:2.2rem;
text-transform: uppercase;
padding-bottom: 0.3rem;
overflow: hidden;
}
.player-name-border{
border-bottom: 2px solid;
border-color: rgba(233,204,116, 0.1);
}
.player-name-border2{
border-bottom: 2px solid;
border-color: rgba(13, 33, 74, 0.2);
}
.player-name span{
display: block;
text-shadow:2px 2px #111;
}
.player-name2 span{
display: block;
text-shadow:2px 2px #fff;
}
.player-features{
margin: 1rem auto;
display: flex;
justify-content: center;
}
.player-features-col{
border-right: 2px solid;
padding: 0 3rem;
}
.player-features-col-border{
border-color: rgba(233,204,116, 0.1);
}
.player-features-col-border2{
border-color: rgba(13,33,74, 0.2);
}
.player-features-col span{
display: flex;
font-size: 2rem;
text-transform: uppercase;
}
.player-feature-value{
margin-right: 1rem;
font-weight: 700;
}
.player-feature-title{
font-weight: 300;
}
.player-features-col:last-child{
border:0;
}
.flip-box {
perspective: 1000px;
display: inline-block;
}
.fut-player-card{
position: relative;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .fut-player-card{
transform: rotateY(180deg);
}
.flip-box:hover .fut-front{
filter: alpha(opacity=100);
opacity:1;
}
.fut-front{
position: absolute;
}
.fut-front{
transition: opacity 0.8s linear 1.2s;
filter: alpha(opacity=0);
opacity: 0;
}
I thought it was OK with those elements but the transition is effective when the mouse leave the image and not when the mouse comes over the image :
.flip-box:hover .fut-front{
filter: alpha(opacity=100);
opacity:1;
}
.fut-front{
transition: opacity 0.8s linear 1.2s;
filter: alpha(opacity=0);
opacity: 0;
}
EDIT : It works on Firefox but not on Chrome
You can select the element with javascript and add:
addEventListener("mouseenter", function( event ) {
//change opacity here
})
I have a drop-down menu on a site that I have been working on I and I need to get rid of this gap above the drop-down menu. It is quite bothersome.
Figure A
So, in an attempt to fix it, I changed the li line-height from 50px to 47px and got this:
Figure B
Almost what I want, but not quite. The problem? The li is higher causing the little animation I have under the li to no longer touch the image.
Then, I tried giving the li a relative position. But now, the drop-down is the same width as the 'Patient Info' link.
Figure C
Here is my jsfiddle link if you would like to fiddle around with it. There is no rush. Thank you!
Code:
body {
font-family: 'Source Sans Pro', sans-serif;
max-width: 2500px;
margin: 0 auto 30px auto;
}
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
img#profile {
width: 100%;
max-width: 64px;
border-radius: 100%;
}
.header,
.menu,
.hero,
.slider,
.img-display {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::selection {
background: #11b5e4;
color: white;
}
::-moz-selection {
background: #11b5e4;
color: white;
}
/* HEADER & MENU STYLE START */
.header {
height: 100px;
padding: 15px 10px 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.header h1 {
margin: 0px 25px 0px 25px;
}
.header img {
height: 100%;
pointer-events: none;
}
.header a i {
font-size: 30px;
margin: 0px 0px 0px 15px;
color: black;
transition: .15s color;
}
.header a i:hover {
color: #11b5e4;
}
.menu-wrapper {
height: 50px;
display: flex;
justify-content: center;
}
.menu li {
display: inline-block;
line-height: 50px;
}
.menu li a {
display: inline-block;
font-size: 23px;
margin: 0px 10px;
transition: .2s cubic-bezier(.5, 3, .5, .5) background;
color: black;
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 0px no-repeat;
text-decoration: none;
}
.menu li a:hover {
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 5px no-repeat;
}
.menu-wrapper #toggle-menu {
display: none;
}
/* FOR STACK OVERFLOW */
.menu li ul {
margin: 0;
padding: 0;
display: none;
background: white;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
}
li:hover ul {
display: flex;
flex-direction: column;
position: absolute;
}
/* END OF FOR STACK OVERFLOW */
#media only screen and (max-width: 1000px) {
.menu {
opacity: 0;
position: relative;
top: 50px;
transition: .25s opacity;
pointer-events: none;
}
.menu-wrapper #toggle-menu:checked~.menu {
opacity: 1;
pointer-events: all;
}
.menu li {
display: block;
text-align: center;
background-color: white;
padding: 0px 15px;
}
.menu-wrapper label {
align-self: center;
width: 32px;
height: 32px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.menu-wrapper label:hover {
cursor: pointer;
}
.menu-wrapper label#open-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-open-icon.png) center center/cover no-repeat;
}
.menu-wrapper label#close-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-close-icon.png) center center/cover no-repeat;
opacity: 0;
}
.menu-wrapper #toggle-menu:checked~label#open-menu {
opacity: 0;
transform: rotate(360deg);
}
.menu-wrapper #toggle-menu:checked~label#close-menu {
opacity: 1;
transform: rotate(360deg);
}
}
#media only screen and (max-width: 750px) {
.header {
height: 75px;
}
.header h1 {
margin: 0px 5px;
font-size: 20px;
}
.header a i {
font-size: 20px;
margin: 0px 0px 0px 5px;
}
}
/* HEADER & MENU STYLE END */
/* HERO START */
.hero {
display: flex;
justify-content: center;
height: calc(150px + 20vw);
width: 100%;
}
.hero h1 {
text-align: center;
font-size: 35px;
padding: 8px;
margin: 15px;
background: rgba(17, 181, 228, .75);
border-radius: 10px;
color: white;
font-weight: bolder;
}
.hero.a {
align-items: flex-end;
background: url(http://ianspence.us/stack/hero.a.jpg) center/cover no-repeat;
}
.hero.b {
align-items: flex-end;
background: url(media/hero.b.jpeg) center/cover no-repeat;
}
#media only screen and (max-width: 900px) {
.hero.a,
.hero.b {
height: 300px;
}
.hero.a h1,
.hero.b h1 {
font-size: 26px;
}
}
#media only screen and (max-width: 400px) {
.hero.a,
.hero.b {
height: 250px;
}
.hero.a h1,
.hero.b h1 {
font-size: 16px;
}
}
/* HERO END */
<!DOCTYPE html>
<html>
<head>
<title>#pfcainc | Home</title>
<link rel='shortcut icon' href='http://ianspence.us/stack/icon.png'>
<link rel='stylesheet' href='style.css'>
<link rel='stylesheet' href='media/fontawesome/css/fontawesome-all.css'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='robots' content='index, follow'>
<meta name='revisit-after' content='3 days'>
<meta name='viewport' content='initial-scale=1'>
</head>
<body>
<div class='header'>
<img src='http://ianspence.us/stack/icon.png'>
<h1>Panhandle Family Care Associates</h1>
<a href='https://facebook.com/panhandlefamilycareassociates/'><i class='fab fa-facebook-square'></i></a>
<a href='https://twitter.com/pfcainc'><i class='fab fa-twitter'></i></a>
</div>
<div class='menu-wrapper'>
<input type='checkbox' id='toggle-menu'>
<label for='toggle-menu' id='open-menu'></label>
<label for='toggle-menu' id='close-menu'></label>
<!--Start Menu Display-->
<div class='menu'>
<li><a href='=./'>Home</a></li>
<li><a href='services'>Services</a></li>
<li><a href='physicians'>Physicians</a></li>
<li>Patient Info
<ul>
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
</li>
<li><a href='office-info'>Office Info</a></li>
</div>
<!--End Menu Display-->
</div>
<div class='hero a'>
<h1>Treating your family like ours since 2002</h1>
</div>
</body>
</html>
Notes:
In jsfiddle, make sure you increase the width of the preview so that the
full menu is there, not the hamburger menu.
I am trying to avoid Javascript completely.
margin-top: -3px for submenu seems to fix the issue across all (major) browsers, however I'd recommend fix from my Codepen, with flex and defined height for li elements.
Fast & simple
HTML:
<ul class="submenu">
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
CSS:
.submenu {
margin-top: -3px !important;
}
More clean approach
Codepen
How can I modify the styles below to result in the elements having the same spacing between each after the scaling? (without absolutely positioning them)
Desired Result:
.menu-next, .menu-previous1 {
transform: scale(.9); transform-origin: left;
}
.menu-previous2 { transform: scale(.7); transform-origin: left;}
.menu-previous3 { transform: scale(.55); transform-origin: left;}
.menu {
background-color: gray;
padding: 10px;
}
.menu div {
display: block;
width: 20%;
padding: 10px;
background-color: white;
color: green;
}
<div class="menu">
<div class="menu-previous3">Items</div>
<div class="menu-previous2">Store</div>
<div class="menu-previous1">Friends</div>
<div class="menu-current" >Settings</div>
<div class="menu-next" >Other</div>
</div>
Use scale(x, y) and not scale(value) + transform-origin
.menu-next,
.menu-previous1 {
transform: scale(.9, 1);
transform-origin: left;
}
.menu-previous2 {
transform: scale(.7, 1);
transform-origin: left;
}
.menu-previous3 {
transform: scale(.55, 1);
transform-origin: left;
}
.menu {
display: flex;
flex-direction: column;
justify-content: center;
background-color: gray;
padding: 10px;
}
.menu div {
display: block;
width: 20%;
padding: 10px;
background-color: white;
border: 1px solid green;
color: green;
}
<div class="menu">
<div class="menu-previous3">Items</div>
<div class="menu-previous2">Store</div>
<div class="menu-previous1">Friends</div>
<div class="menu-current">Settings</div>
<div class="menu-next">Other</div>
</div>
With thatthere is an other problem : scalling text. But you can fix that with pseudo-element (like here)
The best way is to wrap the scaling items and apply the other ui properties seperately of items to that wrapping div and then apply the scaling to the item inside it only.
Here is your code with this theory applied and a little change of padding and margin for equal spacing:
.itemwrapper .menu-next, .itemwrapper .menu-previous1 {
transform: scale(.9); transform-origin: left;
}
.itemwrapper .menu-previous2 { transform: scale(.7); transform-origin: left;}
.itemwrapper .menu-previous3 { transform: scale(.55); transform-origin: left;}
.menu {
background-color: gray;
padding: 10px;
}
.itemwrapper{
display: block;
width: 20%;
padding: 5px 10px;
margin:2px;
background-color: white;
color: green;
}
<div class="menu">
<div class="itemwrapper"><div class="menu-previous3">Items</div></div>
<div class="itemwrapper"><div class="menu-previous2">Store</div></div>
<div class="itemwrapper"><div class="menu-previous1">Friends</div></div>
<div class="itemwrapper"><div class="menu-current" >Settings</div></div>
<div class="itemwrapper"><div class="menu-next" >Other</div></div>
</div>
Hope this helps.
May be you can adjust it by hand ... Not really a good solution, but it is difficult to go any better.
.menu-next,
.menu-previous1 {
transform: scale(.9);
}
.menu-previous2 {
transform: scale(.7);
margin-bottom: -6px;
}
.menu-previous3 {
transform: scale(.55);
margin-bottom: -12px;
}
.menu {
background-color: gray;
padding: 10px;
}
.menu div {
display: block;
width: 20%;
padding: 10px;
background-color: white;
color: green;
transform-origin: left;
}
<div class="menu">
<div class="menu-previous3">Items</div>
<div class="menu-previous2">Store</div>
<div class="menu-previous1">Friends</div>
<div class="menu-current">Settings</div>
<div class="menu-next">Other</div>
</div>
Based a bit off this answer and sort of hack-y: https://stackoverflow.com/a/16388428/1204415
Wrap your scaled divs, resize the wrappers, and move the scaled divs with negative margins within the wrappers. scale() seems to also scale borders, margins, and padding.
HTML
<div class="menu">
<div class="wrap1">
<div class="item menu-previous3">Items</div>
</div>
<div class="wrap2">
<div class="item menu-previous2">Store</div>
</div>
<div class="item menu-previous1">Friends</div>
<div class="item menu-current" >Settings</div>
<div class="item menu-next" >Other</div>
</div>
CSS
.wrap1 {
height: 20px;
margin: 0;
overflow: hidden;
background-color: black;
}
.wrap2 {
height: 32px;
margin: -5px 0 0 0;
overflow: hidden;
background-color: blue;
}
.menu-next, .menu-previous1 {
transform: scale(.9); transform-origin: left;
}
.menu-previous2 { transform: scale(.7); transform-origin: left;}
.menu-previous3 { transform: scale(.55); transform-origin: left; margin: -8px 0 0 0; }
.menu {
background-color: gray;
padding: 10px;
}
.menu .item {
display: block;
outline:1px solid red;
width: 20%;
padding: 10px;
background-color: white;
color: green;
}
A pen: https://codepen.io/dmoz/pen/vmjybo
I'm playing around with a pure CSS accordion http://reversl.net/accordion/ I can get the basic functionality to work (headings 2 & 3 both toggle) But I can't get heading 1 to toggle if I add the same UL to it. Because Heading 1 is styled differently the problem (I think) lies within naming/targeting it's + div ?
Please note: I removed the UL from Heading 1 for the sake of the demo because it was preventing Headings 2 & 3 from toggling.
You made several mistakes. Too many to count:
Here is a working example: Try and see, what I changed
http://jsfiddle.net/HerrSerker/ASqE9/
HTML
<div id="wrap">
<div class="accordion">
<div id="two" class="section">
<h4>
Heading 2
</h4>
<div class="sub_section">
<ul class="list">
<li>Sample Text 1</li>
<li class="last">Sample Text 2</li>
</ul>
</div>
</div><!--#two-->
<div id="four" class="section progress">
<h4>
Heading 4 (With Progress Bar)
</h4>
<div class="metrics">
<div class="meter">
<span style="width: 75%"></span>
</div><!--.meter-->
</div><!--.metrics-->
<div class="sub_section">
<ul class="list">
<li>Sample Text 1</li>
<li class="last">Sample Text 2</li>
</ul>
</div><!--.sub_section-->
</div><!--#one-->
</div><!--accordian-->
</div>​
CSS
#wrap {
width: 320px;
background: #f0f0f0;
margin: auto;
}
.accordion {
clear: both;
padding: 0;
margin: 0 auto;
}
.accordion h4 {
margin: 0;
}
.accordion h4 a {
padding: 1em;
color: #999;
display: block;
font-weight: normal;
text-decoration: none;
}
.accordion h4 a:hover {
text-decoration: none;
background: #111;
}
.accordion .section {
background: #222;
border-bottom: 1px solid #000;
}
.accordion .sub_section {
border-bottom: none;
background: #f0f0f0;
}
.list {
padding: 0;
margin: 0;
}
.list li {
background: url('http://www.placehold.it/40x40') no-repeat;
color: #999;
list-style: none;
padding: .7em .7em .7em 4em;
border-bottom: 1px solid #fff;
}
.list .last {
border-bottom: none;
}
.accordion .sub_section {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target h4 a {
text-decoration: none;
font-weight: bold;
}
.accordion :target .sub_section {
height: 80px;
}
.accordion .section.large:target h4 + div {
overflow: auto;
}
.accordion p {
color: #646464;
}
.accordion .progress .meter {
width: 90%;
height: 2px;
position: relative;
background: #555;
margin: -.9em auto .5em auto;
padding: 1px;
}
.meter > span {
height: 2px;
display: block;
background-color: #f0f0f0;
position: relative;
overflow: hidden;
}
​
This is because the class "progress" assigned to the div id="one" that keeps constant the size of the div with the content.