I have this sass transitions:
.card{
transition: all 0.5s ease;
position: relative;
height: auto;
}
.artistInfo{display: none;}
.card:hover{
box-shadow: 10px 10px rgba(128, 128, 128, 0.37);
margin-top: -3%;
.artistInfo{
display: block;
}
}
the hovers works fine, and the transitions works too except for the .artistInfo transition.
You can't animate display property. What you can do is animate opacity
.card {
transition: all 0.5s ease;
position: relative;
height: auto;
}
.artistInfo {
opacity: 0;
position: absolute;
}
.card:hover {
box-shadow: 10px 10px rgba(128, 128, 128, 0.37);
margin-top: -3%;
&+.artistInfo {
opacity: 1;
}
}
http://codepen.io/anon/pen/XMLvqZ
Maybe is because "}" is in the incorrect place for ".card:hover"
correct:
.card{
transition: all 0.5s ease;
position: relative;
height: auto;
}
.artistInfo{display: none;}
.card:hover{
box-shadow: 10px 10px rgba(128, 128, 128, 0.37);
margin-top: -3%;
}
.artistInfo{
display: block;
}
Your nesting is correct you just don't have a transition on your '.artistInfo' class. Updating to this should work:
.card{
transition: all 0.5s ease;
position: relative;
height: auto;
}
.artistInfo{
opacity: 0;
display:none;
transition: all 0.5s ease
}
.card:hover{
box-shadow: 10px 10px rgba(128, 128, 128, 0.37);
margin-top: -3%;
.artistInfo{
opacity: 1;
display: block;
transition: all 0.5s ease
}
}
Related
I tried every trick I could find but still, the animation is jerky.
I tried following some advice on another question where it was advised to use transition instead of keyframes but it seems that with transition only I'd need to use Javascript which I want to avoid.
Here is the snippet:
/* ////////////////// TOP NAV BAR GRID //////////////// */
.grid-container-topnav {
position: absolute;
top: 1px;
left: 1px;
width: 290px;
display: inline-grid;
width: 0px;
gap: 0px;
padding: 0px;
grid-template-columns: repeat(4, minmax(69px, 69px)) 14px;
grid-template-rows: 32px;
}
.grid-item-topnav {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 16px;
font-family: Candara Light, Cascadia Code, Courier New, monospace;
border: solid 1px #272727;
color: #e4e4e4;
overflow: hidden;
opacity: 0;
}
.topnav-item1 {
grid-column: 1;
grid-row: 1;
}
.topnav-item2 {
grid-column: 2;
grid-row: 1;
}
.topnav-item3 {
grid-column: 3;
grid-row: 1;
}
.topnav-item4 {
grid-column: 4;
grid-row: 1;
}
.topnav-item1,
.topnav-item2,
.topnav-item3,
.topnav-item4{
background: linear-gradient(0deg, #303030, transparent) #505050;
animation-duration: 0.2s;
transition: 0.2s ease-in-out;
}
.topnav-item1:hover,
.topnav-item2:hover,
.topnav-item3:hover,
.topnav-item4:hover{
-webkit-box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #6461ff;
-webkit-transition: 0.25s ease-out;
display: inline;
border: solid 1px #6461ff;
background-color: #6968a7;
}
.topnav-item1:active,
.topnav-item2:active,
.topnav-item3:active,
.topnav-item4:active{
-webkit-box-shadow: inset 1px 1px 5px #00000013, 1px 1px 8px #e9666699;
-webkit-transition: 0.25s ease-out;
display: inline;
border: solid 1px #e63f3f;
background-color: #6e6e6e;
}
.topnav-item5 {
top:0px;
grid-column: 5;
grid-row: 1;
font-family: Arial;
animation-duration: 0.2s;
transition: 0.2s ease-in-out;
color: #cccccc;
background-color: #9b1e1e;
}
.topnav-item5:hover {
-webkit-box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #c71e1e;
border: solid 1px #c71e1e;
color: #ffffff00;
background-color: #9b1e1e;
}
.active_tab {
outline: 0;
-webkit-transition: 0.25s ease-out;
display: inline;
background-color: #6968a7;
}
/* /////// - ONLOAD ANIMATION > CHILD SUBGRID ITEMS - /////// */
.j05 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0s ease-in-out forwards; }
.j04 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0.1s ease-in-out forwards; }
.j03 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0.2s ease-in-out forwards; }
.j02 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0.3s ease-in-out forwards; }
.j01 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0.4s ease-in-out forwards; }
#-webkit-keyframes scale-in-item {
0% {
opacity: 0;
transform: perspective(0px) scale3d(0.1, 0.1, 1) translateZ(0px);
}
100% {
top: 0px;
left:0px;
opacity: 1;
transform: perspective(0px) scale3d(1, 1, 1) translateZ(0px);
}
}
.no-flickr {
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
}
<div class="grid-container-topnav">
<button class="grid-item-topnav topnav-item1 no-flickr j01" id="myItem1" tabindex="-1">Banana</button>
<button class="grid-item-topnav topnav-item2 no-flickr j02" id="myItem2" tabindex="-1">Apples</button>
<button class="grid-item-topnav topnav-item3 no-flickr j03" id="myItem3" tabindex="-1">Oranges</button>
<button class="grid-item-topnav topnav-item4 no-flickr j04" id="myItem4" tabindex="-1">Kiwis</button>
<button class="grid-item-topnav topnav-item5 no-flickr j05" id="myItemX" tabindex="-1"></button>
</div>
As user #JHeth suggested, I added the position values to the #Keyframes.
transform: perspective(0px) translate3d(-50px, 15px, 0px) translateZ(0px);
It worked. Now the animation is smooth like silk.
I'm trying to change the text on hover, it works, but I'm wondering why the text goes to the right when you unhover the div.
I want to make the same effect when you unhover the div. Is it because the position absolute? I'm pretty new to web development.
.article-title {
opacity: 1;
width: 24%;
position: absolute;
padding-bottom: 10px;
color: #ff0099;
font-size: 30px;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.article-desc {
width: 23%;
position: absolute;
opacity: 0;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.box-link {
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
height: 200px;
width: 25%;
text-align: center;
cursor: pointer;
transition: transform .5s, box-shadow .2s;
}
.box-link:hover {
transform: scale(1.15);
box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}
.box-link:hover .article-title {
width: 89%;
position: absolute;
opacity: 0;
}
.box-link:hover .article-desc {
width: 95%;
opacity: 1;
}
<div class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so many stunning Australian native flowers to choose from.</a>
</div>
Change your CSS to :
.article-title {
opacity: 1;
position: absolute;
padding-bottom: 10px;
color: #ff0099;
font-size: 30px;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.article-desc {
position: absolute;
opacity: 0;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.box-link {
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
height: 200px;
width: 25%;
text-align: center;
cursor: pointer;
transition: transform .5s, box-shadow .2s;
position: relative;
}
.box-link:hover {
transform: scale(1.15);
box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}
.box-link:hover .article-title {
position: absolute;
opacity: 0;
}
.box-link:hover .article-desc {
opacity: 1;
}
<div class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so
many stunning Australian native flowers to choose from.</a>
</div>
The idea is to make the parent position relative so that you no longer need width explicitly to containerize the childs.
i have my link that was styled, but when I change link tag to button in html and css styling won't work. How can get that styling on button type submit note I can't get link to submit via js because of interference with stripe that's why i wanna get this one working
a styling that is working
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 0;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 0px auto 0;
padding: 14px 15px;
color: #fff;
font-size:12px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: rgb(68, 68, 68);
cursor: pointer;
display: block;
position: relative;
border: 1px solid #dddddd;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
a.animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #f5f5f5;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
{% trans "pay" %}
button styling that won't work
button[type=submit].animated-button:link:after, button[type=submit].animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 0;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
button[type=submit].animated-button:link:hover, button[type=submit].animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
button[type=submit].animated-button:link:hover:after, button[type=submit].animated-button:visited:hover:after {
height: 450%;
}
button[type=submit].animated-button:link, button[type=submit].animated-button:visited {
position: relative;
display: block;
margin: 0px auto 0;
padding: 14px 15px;
color: #fff;
font-size:12px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
button[type=submit].animated-button.thar-three {
color: rgb(68, 68, 68);
cursor: pointer;
display: block;
position: relative;
border: 1px solid #dddddd;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
button[type=submit].animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
button[type=submit].animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
button[type=submit].animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #f5f5f5;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
<button type="submit" href="" class="btn btn-sm animated-button thar-three">{% trans "pay" %}</button>
since a div is not a link, you can't use the selectors :link nor :visited. By simply removing them from your css, the result is way closer. Of course, you may have to implement a method to replace the use of :link and :visited
button[type=submit].animated-button:after, button[type=submit].animated-button:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
button[type=submit].animated-button:hover, button[type=submit].animated-button:hover {
color: #FFF;
text-shadow: none;
}
button[type=submit].animated-button:hover:after, button[type=submit].animated-button:hover:after {
height: 450%;
}
button[type=submit].animated-button, button[type=submit].animated-button {
position: relative;
display: block;
margin: 0px auto 0;
padding: 14px 15px;
color: #fff;
font-size:12px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
button[type=submit].animated-button.thar-three {
color: rgb(68, 68, 68);
cursor: pointer;
display: block;
position: relative;
border: 1px solid #dddddd;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
button[type=submit].animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
button[type=submit].animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
button[type=submit].animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #f5f5f5;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
<button type="submit" href="" class="btn btn-sm animated-button thar-three">{% trans "pay" %}</button>
I want to slide the plus icon link when the user hovers on the image. when the image isn't hovered I have placed the button outside of image and set the opacity: 0. then on hover I want it to slide in. so I'm setting the opacity: 1 and changing its positions. but on hover the link don't show up.
Any suggestions?
.project {
position: relative;
}
.project .image {
position: relative;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.project .image::before {
content: '';
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(100, 81, 246, 0.9);
border-radius: 10px;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.project .image img {
border-radius: 10px;
-webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.project .image img:hover {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
}
.project .project:hover,
.project .image:hover::before {
opacity: 1;
}
.project .project:hover .view-link,
.project .image:hover .view-link {
opacity: 1;
top: 40%;
}
.project .view-link {
position: absolute;
top: 90%;
left: 0;
right: 0;
width: 50px;
height: 50px;
margin: 0 auto;
opacity: 0;
color: #fffefe;
z-index: 1;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.project .view-link:hover {
color: #cacaca;
}
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.0/css/all.css"
integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q"
crossorigin="anonymous"
/>
<div class="project">
<div class="image">
<img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
</div>
<a class="view-link" href="#">
<i class="fas fa-plus-circle fa-3x"></i>
</a>
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
The problem is this line:
.project .project:hover .view-link
You're referencing .project twice but there is only one mention of it in your HTML.
It should be:
.project:hover .view-link
Also, there was some missing HTML in your example code of which your CSS depended. I added two divs for #home-d and .projects-wrapper, respectively.
Demo
.project {
position: relative;
}
.project .image {
position: relative;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.project .image::before {
content: '';
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(100, 81, 246, 0.9);
border-radius: 10px;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.project .image img {
border-radius: 10px;
-webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.project .image img:hover {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
}
.project .project:hover,
.project .image:hover::before {
opacity: 1;
}
.project:hover .view-link,
.project .image:hover .view-link {
opacity: 1;
top: 40%;
}
.project .view-link {
position: absolute;
top: 90%;
left: 0;
right: 0;
width: 50px;
height: 50px;
margin: 0 auto;
opacity: 0;
color: #fffefe;
z-index: 1;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.project .view-link:hover {
color: #cacaca;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous" />
<div class="project">
<div class="image">
<img src="https://dummyimage.com/590x390/000/fff&text=Some+Image" alt="" />
</div>
<a class="view-link" href="#">
<i class="fas fa-plus-circle fa-3x"></i>
</a>
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
I've tried many approaches to get this working correctly, but with no success.. I notice that this question has been asked a few times already, and i've tried the solutions i've found.. but with no success..
So i'll upfront say sorry if someone of you find this question as a duplicate :(
The hovered element is "food-box", and the element which needs the scale-animation is "food-box-image" :
<div class="food-box">
<div class="food-box-image" style="background-image: url(myimage.jpg);"></div>
... and i'm trying to get the animation working like this :
.food-box:hover ~ .foox-box-image {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
border:8px solid red;
}
but it will not fire :
the only way i got it working, is with specifying .food-box-image:hover, but then it will not fire when hovering the needed div element..
Here's complete code (which runs) :
Anyone know how to do this ?
.fixedbuttons-container {
position: absolute;
width: 100%;
}
.buttons,
.fixedbuttons {
display: flex;
flex-flow: row wrap;
}
.fixedbuttons > * {
width: 25%;
}
.fixedbuttons > * > * {
width: 100%;
text-align: center;
}
.food-box-container {
padding: 10px;
}
.food-box {
flex: 1;
position: relative;
background-color: white;
min-height: 300px;
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
border-color: #666666;
border: 1px solid #666666;
word-wrap: break-word;
margin: 0 !important;
padding: 0 !important;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box:hover {
cursor: pointer;
-webkit-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
-moz-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box:hover ~ .foox-box-image {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
border:8px solid red;
}
.food-box .food-box-image {
position: absolute top: 0 left: 0;
background-size: cover;
width: 100%;
min-height: 150px;
background-color: #ffffff;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.food-box .food-box-content {
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
position: absolute bottom: 0 left: 0;
word-wrap: break-word;
width: 100%;
min-height: 150px;
background-color: #ffd531;
color: #000000;
font-size: 80%;
padding-top: 60px;
padding-left: 5px;
padding-right: 5px;
}
.food-box:hover > .food-box .food-box-content {
background: yellow !important;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box .food-box-badge {
display: table;
background: #ffffff !important;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
font-size: 12px;
color: #000000;
text-align: center;
-webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
border-color: #d3e0e9;
border: 1px solid #b3c9e5;
padding-left: 10px;
padding-right: 10px;
}
.food-box .food-box-badge span {
color: #666;
display: table-cell;
vertical-align: middle;
line-height: 1.2em;
word-wrap: break-word;
}
<div class="fixedbuttons-container">
<div class="fixedbuttons">
<div>
<a>
<div class="food-box-container">
<div class="food-box">
<div class="food-box-image" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div>
<div class="food-box-badge"><span>Sydhavsmeny</span></div>
<div class="food-box-content">
adslkfjaølkfj
</div>
</div>
</div>
</a>
</div>
<div>
<a>
<div class="food-box-container">
<div class="food-box">
<div class="food-box-image scalable" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div>
<div class="food-box-badge"><span>Sydhavsmeny</span></div>
<div class="food-box-content">
adslkfjaølkfj
</div>
</div>
</div>
</a>
</div>
</div </div>
The first is the typo foox* to be replaced with .food-box:hover > .foox-box-image as pointed out by #panther
Now if you want to only scale within the container box apply overflow: hidden to the wrapping container which is food-box
Hope this is what you are expecting.
.fixedbuttons-container {
position: absolute;
width: 100%;
}
.buttons,
.fixedbuttons {
display: flex;
flex-flow: row wrap;
}
.fixedbuttons > * {
width: 25%;
}
.fixedbuttons > * > * {
width: 100%;
text-align: center;
}
.food-box-container {
padding: 10px;
}
.food-box {
overflow: hidden;
flex: 1;
position: relative;
background-color: white;
min-height: 300px;
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
border-color: #666666;
border: 1px solid #666666;
word-wrap: break-word;
margin: 0 !important;
padding: 0 !important;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box:hover {
cursor: pointer;
-webkit-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
-moz-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box:hover > .food-box-image {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.food-box .food-box-image {
position: absolute top: 0 left: 0;
background-size: cover;
width: 100%;
min-height: 150px;
background-color: #ffffff;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.food-box .food-box-content {
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
position: absolute bottom: 0 left: 0;
word-wrap: break-word;
width: 100%;
min-height: 150px;
background-color: #ffd531;
color: #000000;
font-size: 80%;
padding-top: 60px;
padding-left: 5px;
padding-right: 5px;
}
.food-box:hover > .food-box .food-box-content {
background: yellow !important;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box .food-box-badge {
display: table;
background: #ffffff !important;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
font-size: 12px;
color: #000000;
text-align: center;
-webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
border-color: #d3e0e9;
border: 1px solid #b3c9e5;
padding-left: 10px;
padding-right: 10px;
}
.food-box .food-box-badge span {
color: #666;
display: table-cell;
vertical-align: middle;
line-height: 1.2em;
word-wrap: break-word;
}
<div class="fixedbuttons-container">
<div class="fixedbuttons">
<div>
<a>
<div class="food-box-container">
<div class="food-box">
<div class="food-box-image" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div>
<div class="food-box-badge"><span>Sydhavsmeny</span></div>
<div class="food-box-content">
adslkfjaølkfj
</div>
</div>
</div>
</a>
</div>
<div>
<a>
<div class="food-box-container">
<div class="food-box">
<div class="food-box-image scalable" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div>
<div class="food-box-badge"><span>Sydhavsmeny</span></div>
<div class="food-box-content">
adslkfjaølkfj
</div>
</div>
</div>
</a>
</div>
</div </div>