I put 2 <div> side by side and added both a scale animation and an overlay on hover. Yet the left side jitters when the mouse moves inside the area while the right side is quite stable on hover.
I thought both sides are using pretty much the same code and could not figure out the cause of this problem. What caused the jitter?
code here
body {
font-family: 'Asap', sans-serif;
color: white;
margin-left: 10%;
margin-right: 10%;
margin-top: 5%;
background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
background-attachment: fixed;
}
.showcase {
margin-top: 5%;
position: relative;
display: block;
overflow: hidden;
}
.cameraShowcase {
width: 47.5%;
padding-right: 2.5%;
float: left;
transition: transform .3s;
}
.cameraShowcase:hover .overlay {
opacity: 0.75;
}
.cameraShowcase:hover {
transform: scale(1.1);
}
.wheelShowcase {
width: 47.5%;
padding-left: 2.5%;
float: left;
transition: transform .3s;
}
.wheelShowcase:hover .overlay {
opacity: 0.75;
}
.wheelShowcase:hover {
transform: scale(1.1);
}
.overlay {
text-align: center;
position: absolute;
opacity: 0;
transition: .3s;
background-color: #333;
top: 0;
bottom: 0;
right: 0;
height: 100%;
width: 95%;
}
#leftOverlay {
left: 0;
}
#rightOverlay {
left: 5%;
}
.textContainer {
padding-left: 10%;
padding-right: 10%;
padding-top: 15%;
line-height: 2;
}
<div class="showcase">
<div class="cameraShowcase">
<div class="pic">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
</div>
<div class="overlay" id="leftOverlay">
<div class="textContainer">
<h3>Camera and Sensors</h3>
</div>
</div>
</div>
<div class="wheelShowcase">
<div class="pic">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
</div>
<div class="overlay" id="rightOverlay">
<div class="textContainer">
<h3>Power System</h3>
</div>
</div>
</div>
</div>
You are having a complex case of stacking elements. You set your overlay element position:absolute and the first positionned ancestor is showcase so initially both overlay are overlapping and filling the width of showcase
Remove the opacity to notice this:
body {
font-family: 'Asap', sans-serif;
color: white;
margin-left: 10%;
margin-right: 10%;
margin-top: 5%;
background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
background-attachment: fixed;
}
.showcase {
margin-top: 5%;
position: relative;
display: block;
overflow: hidden;
}
.cameraShowcase {
width: 47.5%;
padding-right: 2.5%;
float: left;
transition: transform .3s;
}
.cameraShowcase:hover .overlay {
opacity: 0.75;
}
.cameraShowcase:hover {
transform: scale(1.1);
}
.wheelShowcase {
width: 47.5%;
padding-left: 2.5%;
float: left;
transition: transform .3s;
}
.wheelShowcase:hover .overlay {
opacity: 0.75;
}
.wheelShowcase:hover {
transform: scale(1.1);
}
.overlay {
text-align: center;
position: absolute;
transition: .3s;
background-color: #333;
top: 0;
bottom: 0;
right: 0;
height: 100%;
width: 95%;
}
#leftOverlay {
left: 0;
}
#rightOverlay {
left: 5%;
}
.textContainer {
padding-left: 10%;
padding-right: 10%;
padding-top: 15%;
line-height: 2;
}
<div class="showcase">
<div class="cameraShowcase">
<div class="pic">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
</div>
<div class="overlay" id="leftOverlay">
<div class="textContainer">
<h3>Camera and Sensors</h3>
</div>
</div>
</div>
<div class="wheelShowcase">
<div class="pic">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
</div>
<div class="overlay" id="rightOverlay">
<div class="textContainer">
<h3>Power System</h3>
</div>
</div>
</div>
</div>
Now on hover you add scale() to the parent element of your overlay which will make them positionned relatively to them since transform change the containing block of absolute and fixed element.
So you will have this:
body {
font-family: 'Asap', sans-serif;
color: white;
margin-left: 10%;
margin-right: 10%;
margin-top: 5%;
background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
background-attachment: fixed;
}
.showcase {
margin-top: 5%;
position: relative;
display: block;
overflow: hidden;
}
.cameraShowcase {
width: 47.5%;
padding-right: 2.5%;
float: left;
transition: transform .3s;
}
.cameraShowcase:hover .overlay {
opacity: 0.75;
}
.cameraShowcase {
transform: scale(1.1);
}
.wheelShowcase {
width: 47.5%;
padding-left: 2.5%;
float: left;
transition: transform .3s;
}
.wheelShowcase:hover .overlay {
opacity: 0.75;
}
.wheelShowcase:hover {
transform: scale(1.1);
}
.overlay {
text-align: center;
position: absolute;
transition: .3s;
background-color: #333;
top: 0;
bottom: 0;
right: 0;
height: 100%;
width: 95%;
}
#leftOverlay {
left: 0;
}
#rightOverlay {
left: 5%;
}
.textContainer {
padding-left: 10%;
padding-right: 10%;
padding-top: 15%;
line-height: 2;
}
<div class="showcase">
<div class="cameraShowcase">
<div class="pic">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
</div>
<div class="overlay" id="leftOverlay">
<div class="textContainer">
<h3>Camera and Sensors</h3>
</div>
</div>
</div>
<div class="wheelShowcase">
<div class="pic">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
</div>
<div class="overlay" id="rightOverlay">
<div class="textContainer">
<h3>Power System</h3>
</div>
</div>
</div>
</div>
You are toggling between both states and since in the first one you have an overlap, you will get that bad effect where you are losing the hover effect. It doesn't happen with the second image because its overlay is on the top so you will never loss the hover.
To avoid this you can keep transform on your element initially or consider position:relative on them to make sure your overlay elements are positioned relatively to their parent and never overlap:
body {
font-family: 'Asap', sans-serif;
color: white;
margin-left: 10%;
margin-right: 10%;
margin-top: 5%;
background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
background-attachment: fixed;
}
.showcase {
margin-top: 5%;
position: relative;
display: block;
overflow: hidden;
}
.cameraShowcase {
width: 47.5%;
padding-right: 2.5%;
float: left;
transition: transform .3s;
transform: scale(1);
}
.cameraShowcase:hover .overlay {
opacity: 0.75;
}
.cameraShowcase:hover {
transform: scale(1.1);
}
.wheelShowcase {
width: 47.5%;
padding-left: 2.5%;
float: left;
transition: transform .3s;
transform: scale(1);
}
.wheelShowcase:hover .overlay {
opacity: 0.75;
}
.wheelShowcase:hover {
transform: scale(1.1);
}
.overlay {
text-align: center;
position: absolute;
transition: .3s;
background-color: #333;
opacity:0;
top: 0;
bottom: 0;
right: 0;
height: 100%;
width: 95%;
}
#leftOverlay {
left: 0;
}
#rightOverlay {
left: 5%;
}
.textContainer {
padding-left: 10%;
padding-right: 10%;
padding-top: 15%;
line-height: 2;
}
<div class="showcase">
<div class="cameraShowcase">
<div class="pic">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
</div>
<div class="overlay" id="leftOverlay">
<div class="textContainer">
<h3>Camera and Sensors</h3>
</div>
</div>
</div>
<div class="wheelShowcase">
<div class="pic">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
</div>
<div class="overlay" id="rightOverlay">
<div class="textContainer">
<h3>Power System</h3>
</div>
</div>
</div>
</div>
I added the following to your cameraShowcase and wheelShowcase:
position: relative;
display: inline-block;
float: left;
Related
Element 2 is an image for the youtube logo. Element 1 is a button with a visual hover effect with three bars stacked on top of each other.
I want the button on the left and the image right next to it.
I need them in the upper left corner.
Here is a screenshot so far https://postimg.cc/Mn2B8wCR
Here is the code I have so far
.element1 {
display: inline-block;
width: 500px;
}
.element2 {
display: inline-block;
width: 500px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger {
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger>div {
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first {
width: 55px;
top: 25px;
left: 20px;
}
.second {
width: 40px;
top: 45px;
left: 20px;
}
.third {
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div {
width: 60px;
transition: width 0.3s ease;
}
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
You can wrap it in a container and use display: flex;.
.nav-container{
display: flex;
width: 100%;
}
.element1{
display: inline-block;
width: 120px;
}
.wrapper{
padding-left: 10px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger{
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger > div{
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first{
width: 55px;
top: 25px;
left: 20px;
}
.second{
width: 40px;
top: 45px;
left: 20px;
}
.third{
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div{
width: 60px;
transition: width 0.3s ease;
}
.element2{
display: inline-block;
width: 500px;
}
<div class="nav-container">
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
</div>
In HTML, wrap all of element 1 and 2 with a 'container' div:
<div class="container">
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
</div>
In CSS, make div container flex and into a row.
.container {
display: flex;
flex-direction: row;
}
Change your positions of your hamburger and wrapper class:
.wrapper{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger{
width: 100px;
height: 100px;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
Is this you want to do?
Edit:
Here I done below changes:
Removed all styles of the .wrapper which don't need there
Added vertical-align: middle for .element1 and .element2
Removed width from .element1 which don't need there
Added margin-left to .element2 for space
.element1{
display: inline-block;
vertical-align: middle
}
.element2{
margin-left: 30px;
display: inline-block;
vertical-align: middle
}
.hamburger{
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger > div{
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first{
width: 55px;
top: 25px;
left: 20px;
}
.second{
width: 40px;
top: 45px;
left: 20px;
}
.third{
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div {
width: 60px;
transition: width 0.3s ease;
}
.logo {
width: 300px
}
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
you can use this
.container {
display:inline-block;
margin-right:auto }
/* the margin right auto is to force the elements to be on the left corner */ps it should be only the imge and the button inside this div(class='container')
I've stuck with styling issues. What I'm trying to reach is make sure that every single h3 tag has same distance between bottom border of his container (pink border) and bottom border of his parent (picture bottom border). Now it looks like this:
Both of them has same css, difference is only with amount of text.
HTML:
<div class="col-6">
<a href='{{link}}' style='background-image: url("{{image}}")' class="histories__image">
<div class="histories__text">
<h3>{{title}}</h3>
</div>
<div class="histories__underline"></div>
</a>
</div>
CSS:
.histories {
margin-bottom: 100px;
&__image {
height: 41vh;
margin-top: 33px;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
transition: filter 1s;
&:hover{
filter: brightness(80%);
}
&:hover .histories__text{
bottom: 15px;
}
&:hover .histories__underline{
opacity: 1;
left: 0;
width: 70%;
}
}
&__text {
text-align: center;
display: block;
position: absolute;
width: 100%;
bottom: 0px;
left: 50%;
transform: translate(-50%, -50%);
transition: bottom .3s;
color: white;
border: 1px solid pink;
}
&__underline {
position: absolute;
display: block;
bottom: 10%;
width: 0%;
left: 50%;
margin-left: 15%;
background-color: white;
height: 1px;
opacity: 0;
transition: width .3s, left .3s;
}
}
You can try using translate like this to center your content with the same class.
.histories__text{
width: 100%;
}
.histories__text h3{
transform: translate(50%,50%);
}
<div class="col-6">
<a href='{{link}}' class="histories__image">
<div class="histories__text">
<h3>Your Text</h3>
</div>
<div class="histories__underline"></div>
</a>
</div>
I currently have a few vertical tabs that when hovered expand down toward the content within the page. As they expand down, a "content" div within the hovered tab expands out to the right away from the tab. I like the way this looks aside from the fact that I can't seem to get the "content" div to appear on top of the other tabs. I would assume that this is due to stacking order since when I reverse the order it works just fine. Can anyone help me resolve this issue? I've tried z-index, and opacity tricks to get it to work and nothing so far. I understand that z-index changes context based on position and opacity but my knowledge on this is limited. When you supply a possible solution, can you explain why it works?
Code:
.tab {
background: #0AF;
width: 50px;
height: 150px;
position: absolute;
top: -100px;
border-radius: 5px;
transition: all linear 0.2s;
}
.tab:hover {
top: -5px;
border-bottom-right-radius: 0px;
}
.content {
position: absolute;
left: 0;
width: 50px;
height: 150px;
background: #EEE;
border-radius: 5px;
transition: all linear 0.2s;
opacity: 0;
text-align: center;
color: #222;
}
.content .foot {
position: absolute;
bottom: 0;
margin-left: -50px;
margin-bottom: 5px;
}
.tab:hover > .content, .content:hover {
left: 40px;
width: 300px;
opacity: 1;
border-bottom-left-radius: 0px;
}
.about {
background: #0AF;
}
.social {
left: 80px;
background: #F05;
}
.projects {
left: 150px;
background: #0F5;
}
<div class="tab about">
<div class="content">
<span class="foot">About Me</span>
</div>
</div>
<div class="tab social">
<div class="content">
<span class="foot">Social Media</span>
</div>
</div>
<div class="tab projects">
<div class="content">
<span class="foot">Projects</span>
</div>
</div>
Thanks,
Jamie
You could give an z-index to .tab:hover. The order is given by the order of elements in the DOM so if you give a z-index you create a new stacking order referred to the nearest position relative parent. Smashing magazing has a good post in merit link
.tab {
background: #0AF;
width: 50px;
height: 150px;
position: absolute;
top: -100px;
border-radius: 5px;
transition: all linear 0.2s;
}
.tab:hover {
top: -5px;
z-index: 3;
}
.content {
position: absolute;
left: 0;
width: 50px;
height: 150px;
background: #EEE;
border-radius: 5px;
transition: all linear 0.2s;
opacity: 0;
text-align: center;
color: #222;
}
.content .foot {
position: absolute;
bottom: 0;
margin-left: -50px;
margin-bottom: 5px;
}
.tab:hover > .content, .content:hover {
left: 40px;
width: 300px;
opacity: 1;
}
.about {
background: #0AF;
}
.social {
left: 70px;
background: #F05;
}
.projects {
left: 130px;
background: #0F5;
}
<div class="tab about">
<div class="content">
<span class="foot">About Me</span>
</div>
</div>
<div class="tab social">
<div class="content">
<span class="foot">Social Media</span>
</div>
</div>
<div class="tab projects">
<div class="content">
<span class="foot">Projects</span>
</div>
</div>
Just Insert z-index:999 to .content
.tab {
background: #0AF;
width: 50px;
height: 150px;
position: absolute;
top: -100px;
border-radius: 5px;
transition: all linear 0.2s;
}
.tab:hover {
top: -5px;
border-bottom-right-radius: 0px;
}
.content {
position: absolute;
left: 0;
width: 50px;
height: 150px;
background: #EEE;
border-radius: 5px;
transition: all linear 0.2s;
opacity: 0;
text-align: center;
color: #222;
z-index: 999;
}
.content .foot {
position: absolute;
bottom: 0;
margin-left: -50px;
margin-bottom: 5px;
}
.tab:hover > .content, .content:hover {
left: 40px;
width: 300px;
opacity: 1;
border-bottom-left-radius: 0px;
}
.about {
background: #0AF;
}
.social {
left: 80px;
background: #F05;
}
.projects {
left: 150px;
background: #0F5;
}
<div class="tab about">
<div class="content">
<span class="foot">About Me</span>
</div>
</div>
<div class="tab social">
<div class="content">
<span class="foot">Social Media</span>
</div>
</div>
<div class="tab projects">
<div class="content">
<span class="foot">Projects</span>
</div>
</div>
I'm trying to use overlay effect for the images, but I'm not able to fit it exactly to the size of the image.
here is my link to code pen: https://codepen.io/saisree/pen/OmKMgm
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="a col-lg-4 col-md-6 mb-sm-50">
<img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
Here is the CSS:/* .
.myjumbotron{
background-color: black;
} */
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3{
text-color:black;
}
#family h2{
color: black;
text-decoration:none;
}
#Nav h3{
color: black;
text-decoration:none;
}
/* .wrapper {
position: relative;
padding: 0;
width:100px;
display:block;
}
.text {
position: absolute;
top: 0;
color:#f00;
background-color:rgba(255,255,255,0.8);
width: 100px;
height: 100px;
line-height:100px;
text-align: center;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
img {
z-index:1;
}
*/
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.a:hover .overlay {
height: 100%;
}
.b:hover .overlay {
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: white;
overflow: hidden;
width:100%;
height: 0;
transition: .5s ease;
}
/* .team-item {
display:inline-block;
background:red;
margin-bottom:10px;
}
*/
Any kind of help would be highly appreciated!
You forgot to give position: relative; to the parent, please just add:
.a {
position: relative;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3{
text-color:black;
}
#family h2{
color: black;
text-decoration:none;
}
#Nav h3{
color: black;
text-decoration:none;
}
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.a {
position: relative;
}
.a:hover .overlay {
height: 100%;
}
.b:hover .overlay {
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: white;
overflow: hidden;
width:100%;
height: 0;
transition: .5s ease;
}
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="a col-lg-4 col-md-6 mb-sm-50">
<img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
So you can see how this works, I've stripped back your CSS to focus on exactly what's needed here.
I think you should wrap both the image and the overlay div in an another element, which I've given the class inner-wrap as below. This element should be position: relative since it is the parent of both the image and the overlay.
You can then give the overlay position: absolute so it is placed in accordance with the parent. I've stretched it across the entirety of the parent and added a translucent background colour so you can see what's going on easier.
.inner-wrap {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.4);
text-align: center;
}
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="a col-lg-4 col-md-6 mb-sm-50">
<div class="inner-wrap">
<img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
</div>
I'm trying to code a new featured artwork widget for my DeviantART and I'm having a little but of trouble working out how to get the buttons to hover individually, as they both highlight when only one is hovered over.
DeviantART's CSS syntax doesn't support div id's for whatever reason, so my only option is to use class selectors. This got me really stuck, as I've only ever done simple web design/layout. Any support would be greatly appreciated!
*The same image is used on both elements just to test them. The transition properties are for personal testing as well.
HTML:
<div class="container">
<img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
<div class="middle">
<div class="text">1</div>
</div>
<div class="container">
<img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
<div class="middle">
<div class="text">2</div>
</div>
CSS:
.container {
background-color: white;
position: relative;
margin: 0 auto;
width: 500px;
height: 80px;
}
.img {
background-color: white;
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
margin: 10px 0;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.container:hover .image {
opacity: 0.7;
}
.container:hover .middle {
opacity: 1;
background-color: transparent;
}
.text {
text-align: center;
background-color: #8b9fa6;
margin: 0 auto;
color: white;
font-size: 20px;
font-family: abel, sans-serif;
letter-spacing: 10px;
opacity: 1;
width: 500px;
}
You just missed to close your <div class="container"></div>. Otherwise your code works just fine
.container {
background-color: white;
position: relative;
margin: 0 auto;
width: 500px;
height: 80px;
}
.img {
background-color: white;
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
margin: 10px 0;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.container:hover .image {
opacity: 0.7;
}
.container:hover .middle {
opacity: 1;
background-color: transparent;
}
.text {
text-align: center;
background-color: #8b9fa6;
margin: 0 auto;
color: white;
font-size: 20px;
font-family: abel, sans-serif;
letter-spacing: 10px;
opacity: 1;
width: 500px;
}
<div class="container">
<img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
<div class="middle">
<div class="text">1</div>
</div>
</div>
<div class="container">
<img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
<div class="middle">
<div class="text">2</div>
</div>
</div>