For my website I want to use a hover function that shows text once hovering over an imgae with the mouse.
Because I want to implement multiple pictures I used a table whichin each td represents one image.
My problem is that once hovering, the overlay shows but there is no text displayed
I'm a complete beginner in html and css, so if there is anything else I can do different and more efficiently, feel free to let me know.
.container {
position: relative;
width: 50%;
}
.moon {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 300px;
width: 300px;
opacity: 0;
transition: .5s ease;
background-color: white;
}
.container:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.text {
color: blue;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.mr {
position: relative;
float: left;
width: 300px;
padding-left: 40px;
}
.mr:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.plant {
position: relative;
width: 300px;
padding-left: 40px;
padding-right: 120px;
float: left;
}
.plant:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.karteone {
position: relative;
width: 300px;
padding-top: 40px;
}
.karteone:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.kartetwo {
position: relative;
float: left;
width: 300px;
padding-top: 39.5px;
padding-left: 40px;
}
.kartetwo:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
<body>
<div class="Arbeitsprobe">
<h2 class="myworksample">My Work Samples.</h2>
<h5>Graphic Illustrator</h5>
<center>
<table>
<tr>
<td>
<div class="container">
<img class="moon" src="images/moon.png" alt="moon">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</td>
<td><img class="mr" src="images/mr.me.png" alt="mr"></td>
<td><img class="plant" src="images/plant planet.png" alt="plant"></td>
</tr>
</table>
</center>
</div>
</body>
You could use tooltip class from css. This will display the tooltip text while hovering.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
If you want the .overlay to appear on .container:hover, then the code sould be: .container:hover .overlay, like so:
.container {
position: relative;
width: 50%;
}
.moon {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 300px;
width: 300px;
opacity: 0;
transition: .5s ease;
background-color: white;
}
.container:hover .overlay{
opacity: 0.6;
filter: alpha(opacity=10);
}
.text {
color: blue;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.mr {
position: relative;
float: left;
width: 300px;
padding-left: 40px;
}
.mr:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.plant {
position: relative;
width: 300px;
padding-left: 40px;
padding-right: 120px;
float: left;
}
.plant:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.karteone {
position: relative;
width: 300px;
padding-top: 40px;
}
.karteone:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.kartetwo {
position: relative;
float: left;
width: 300px;
padding-top: 39.5px;
padding-left: 40px;
}
.kartetwo:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
<body>
<div class="Arbeitsprobe">
<h2 class="myworksample">My Work Samples.</h2>
<h5>Graphic Illustrator</h5>
<center>
<table>
<tr>
<td>
<div class="container">
<img class="moon" src="images/moon.png" alt="moon">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</td>
<td><img class="mr" src="images/mr.me.png" alt="mr"></td>
<td><img class="plant" src="images/plant planet.png" alt="plant"></td>
</tr>
</table>
</center>
</div>
</body>
Or apply before and/or after in the CSS, like this:
.container {
position: relative;
width: 50%;
}
.moon {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 300px;
width: 300px;
opacity: 0;
transition: .5s ease;
background-color: white;
}
.container:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.text {
color: blue;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.mr {
position: relative;
float: left;
width: 300px;
padding-left: 40px;
}
.mr:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.plant {
position: relative;
width: 300px;
padding-left: 40px;
padding-right: 120px;
float: left;
}
.plant:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.karteone {
position: relative;
width: 300px;
padding-top: 40px;
}
.karteone:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.kartetwo {
position: relative;
float: left;
width: 300px;
padding-top: 39.5px;
padding-left: 40px;
}
.kartetwo:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
/* new code from here */
.moon::after {
content: "Hello World";
color: #ffffff;
border: 1px solid #ffffff;
padding: 10px 40px;
display: inline-block;
top: 0;
position: absolute;
margin-top: 55px;
text-align: center;
line-height: 30px;
left: 50px;
text-transform: uppercase;
opacity: 0;
-webkit-transition: opacity 0.35s ease-in-out;
-moz-transition: opacity 0.35s ease-in-out;
-ms-transition: opacity 0.35s ease-in-out;
-o-transition: opacity 0.35s ease-in-out;
transition: opacity 0.35s ease-in-out;
}
.moon:hover::before {
opacity: 1;
transition: opacity 0.35s ease-in-out;
content: "";
background: rgba(0, 0, 0, 0.8);
display: inline-block;
width: 271px;
height: 167px;
top: 0;
position: absolute;
left: 0px;
}
.moon:hover::after {
content: "Hello World";
color: #ffffff;
border: 1px solid #ffffff;
padding: 10px 40px;
display: inline-block;
top: 0;
position: absolute;
margin-top: 55px;
text-align: center;
line-height: 30px;
left: 50px;
text-transform: uppercase;
opacity: 1;
transition: opacity 0.35s ease-in-out;
}
<body>
<div class="Arbeitsprobe">
<h2 class="myworksample">My Work Samples.</h2>
<h5>Graphic Illustrator</h5>
<center>
<table>
<tr>
<td>
<div class="container">
<img class="moon" src="images/moon.png" alt="moon">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</td>
<td><img class="mr" src="images/mr.me.png" alt="mr"></td>
<td><img class="plant" src="images/plant planet.png" alt="plant"></td>
</tr>
</table>
</center>
</div>
</body>
Related
I cannot figure out how to fixate the first part of the text and to make it show from the bottom
on the left is the hover that slides from the bottom and on the right is how it should look like in the beginning
Ive put the code I tried to use inside - please take a look
Thank you!
.container {
padding: 1em 0;
float: left;
width: 50%;
}
.image1 {
display: block;
width: 100%;
height: auto;
transition: all 0.5s ease;
opacity: 1;
backface-visibility: hidden;
}
.middle {
background: rgb(30, 30, 36);
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: rgb(246, 244, 234);
margin: 0px;
}
.middle:hover {
transition: all 0.3s ease-in-out 0s;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.product-box {
overflow: hidden;
}
.product-box:hover img {
transform: scale(1.04);
transition: all 0.8s linear;
}
.product-box:hover {
background: rgba(30, 30, 36, 0.6) !important;
}
.product-box:hover .image1 {
opacity: 0.5;
background: transparent;
}
.product-box:hover .middle {
opacity: 1;
}
.fadeIn-bottom {
top: 80%;
}
<div class="container">
<div class="product-box fadeIn-bottom" style="margin-top: 20px;">
<img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" data-filename="1.png" style="width: 100%; height: auto; margin-bottom: -40px;" class="image1">
<div class="middle ">
<p style="color: #F6F4EA;">Suites</p>
</div>
<div>
</div>
What you have to do is put the relative, i.e. the product-box in a relative position, then set the absolute position to the "title" to which you want to apply the transition. Once this is done, you need to know how to use transitions and how absolute position works. These two things are important enough to make several cool and simple animations so I recommend you to check them out.
.product-box {
position: relative;
}
.image1 {
width: 100%;
height: 100%;
}
.title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 90%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .5);
color: white;
transition: all .5s;
}
.product-box:hover .title {
top: 0;
}
<div class="container">
<div class="product-box">
<div class="title">
<h4>Suites</h4>
</div>
<img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" data-filename="1.png" class="image1">
<div>
</div>
I assume this is what you want;
.container {
width: 50%;
}
.image1 {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
transition: all 0.5s ease;
opacity: 1;
}
.product-box {
display: flex;
position: relative;
}
.middle {
position: absolute;
width: 100%;
color: #F6F4EA;
background: rgb(30, 30, 36);
font-weight: 400;
font-size: 16px;
line-height: 22px;
margin: 0px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-family: sans-serif;
display: flex;
bottom: 0;
justify-content: center;
align-items: center;
}
.product-box:hover {
transform: scale(1.04);
transition: all 0.8s linear;
}
.product-box:hover .middle {
opacity: 0.8;
height: 100%;
padding: 0;
}
<div class="container">
<div class="product-box">
<img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" class="image1">
<div class="middle">Suites</div>
</div>
</div>
When I hover over the square, I want the text "MENU" to go and "Google" and "Youtube" to appear. I gave the opacity value for it. "MENU" text disappears but other texts are not visible. Why is Youtube and Google text not showing?
I gave visibility: visible and visibility: hidden instead of opacity but I still get the same result. Am i selecting the wrong div's?
CSS body {
background-color: aquamarine;
}
.square {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: azure;
position: relative;
transition: 1s transform;
}
.square:hover {
transform: scale(4);
}
.div1::after {
position: absolute;
content: "MENU";
right: 27px;
top: 40px;
}
.square:hover div:nth-child(1) {
opacity: 0;
}
.div2::after {
content: "- Google";
position: absolute;
bottom: 25px;
right: 5px;
font-size: 10px;
border: 2px solid grey;
padding: 2px;
opacity: 0;
}
.square:hover div:nth-child(2) {
opacity: 1;
}
.div3::after {
content: "- Youtube";
position: absolute;
bottom: 2px;
right: 5px;
font-size: 10px;
border: 2px solid grey;
padding: 2px;
opacity: 0;
}
.square:hover div:nth-child(3) {
opacity: 1;
}
HTML
<div class="square">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
If you have added content using after , then add after in those hover also to work the way you want.
That is use .square:hover div:nth-child(2):after instead of .square:hover div:nth-child(2) only
It works like this see below snippet :
body {
background-color: aquamarine;
}
.square {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: azure;
position: relative;
transition: 1s transform;
}
.square:hover {
transform: scale(4);
}
.div1::after {
position: absolute;
content: "MENU";
right: 27px;
top: 40px;
}
.square:hover div:nth-child(1) {
opacity: 0;
}
.div2::after {
content: "- Google";
position: absolute;
bottom: 25px;
right: 5px;
font-size: 10px;
border: 2px solid grey;
padding: 2px;
opacity: 0;
}
.square:hover div:nth-child(2):after {
opacity: 1;
}
.div3::after {
content: "- Youtube";
position: absolute;
bottom: 2px;
right: 5px;
font-size: 10px;
border: 2px solid grey;
padding: 2px;
opacity: 0;
}
.square:hover div:nth-child(3):after {
opacity: 1;
}
<div class="square">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
I changed your code a bit. See if this does what you need:
I added transform-origin: top left; to prevent the scaling from happening in all directions which caused some of the element to be displayed outside of the viewport.
I got rid of the :after pseudo-elements as they did not contribute to the desired outcome and only complicated things (in my opinion).
CSS body {
background-color: aquamarine;
}
.options {
height: 100px;
margin-top: 5px;
display: none;
}
.options>div {
border: 2px solid gray;
margin-bottom: 4px;
}
.square {
width: 100px;
height: 100px;
border: 1px solid gray;
border-radius: 10px;
background-color: azure;
position: relative;
transition: 1s transform;
}
.square:hover {
transform-origin: top left;
transform: scale(4);
}
.menu {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.square:hover .options {
display: block;
font-size: 10px;
padding: 2px;
}
.square:hover .menu {
display: none;
}
<div class="square">
<div class="menu">Menu</div>
<div class="options">
<div class="div2">Google</div>
<div class="div3">You Tube</div>
</div>
</div>
I have three images with text over them. I want to have text for first and third images to be floated to the left, and the second one to be floated to the right. I got the first and the third images to work, but I am struggling with the second image. I have been looking around but couldn't find any help. and also, I am new to html & css, so I would appreciate if someone could help.
<style>
.image {
position: relative;
width: 100%;
}
h2{
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.h2:nth-of-type(2){
position: absolute;
bottom: 200px;
left: 200px;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.overlay-image {
position: relative;
}
.overlay-image .image {
display: block;
}
.overlay-image .text {
color: #81282A;
font-size: 30px;
line-height: 1.5em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.overlay-image:hover .hover {
opacity: 1;
}
.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.8);
}
.pp{
color: white;
}
#store-container {
position: relative;
width: 100%;
}
#store-image {
opacity: 0.3;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
#store-middle {
transition: .5s ease;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
#store-text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.TEXT{
position: relative;
width: 831px;
height: 134px;
left: 180px;
top: 56px;
padding-top: 10px;
margin-bottom: 15%;
font-style: normal;
font-weight: 300;
font-size: 35px;
line-height: 47px;
text-align: center;
color: black;
}
</style>
<div class="image"><img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/smart_large.jpg?v=1562170226" width="1179" height="480" alt="Alt text" />
<h2><span>Custom Smart Kitchens<br />We build Custom smart kitchens</span></h2>
</div>
<div class="pp">here</div>
<div class="image"><img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/laptopRepair_large.jpg?v=1561171348" width="1179" height="480" alt="Alt text" />
<h2><span>We have our own designer</span></h2>
</div>
<div class="pp">here</div>
<div class="image"><img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/electric_car_large.jpeg?v=1562179941" width="1179" height="480" alt="Alt text" />
<h2><span>We come and build it for you</span></h2>
</div>
<div class="pp">here</div>
<div class="TEXT">
<p>For more designs, visit us at the store.<br />
Call us to schedule a free quote</p>
</div>
The easiest way would be to mark the h2 you want to align right diretly in the markup
So change the markup (html) of the second <h2> and add a class <h2 class="right"> and apply the following additional css rules
div.image {
display: inline-block;
width: auto;
}
h2.right {
right: 0px;
left: auto;
width: auto;
}
I'm trying to create images with texts on them but when it hovers the brightness of the image goes down yet it shouldn't affect the text. Can I achieve that just with css?
#mixin easeOut {
transition: all 0.3s ease-out;
}
.team-pics {
display: flex;
flex-wrap: wrap;
div {
width: 33%;
img {
display: block;
width: 100%;
padding: 1rem;
#include easeOut;
}
.team-pic-caption {
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
#include easeOut;
color: #fff;
}
&:hover {
filter: brightness(.5);
.team-pic-caption {
opacity: 1;
}
}
}
}
<div class="team-pics">
<div>
<img src="https://images.unsplash.com/photo-1515550833053-1793be162a45?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=31a23f7d7e8b0e43153da6565aa7157e&auto=format&fit=crop&w=500&q=60" />
<div class="team-pic-caption">
<h3>Josh Garwood</h3>
<p>Co-Founder and Technical Director</p>
</div>
</div>
<div>
<img src="https://images.unsplash.com/photo-1513267096918-a2532362a784?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f971c866a1e22a858a0c2ea72274838c&auto=format&fit=crop&w=500&q=60" />
<div class="team-pic-caption">
<h3>Jason Benjamin</h3>
<p>Co-Founder and Marketing Director</p>
</div>
</div>
</div>
https://codepen.io/yubind/pen/mGWQBr
I have a few potential solutions for you
Here is the first (background will blur, but text will remain the same, code is adaptable to your needs of course):
#imgtext {
position: relative;
float: left;
width: 300px;
padding: 30px;
margin: 15px;
border-radius: 20px;
height: 150px;
overflow: hidden;
}
#imgtext:after {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(https://upload.wikimedia.org/wikipedia/en/e/e4/Blank_cd.png) no-repeat center;
background-size: cover;
}
#imgtext:hover:after {
-webkit-filter: blur(5px);
}
p {
font-size: 3em;
color: red;
text-align: center;
}
<div>
<div id="imgtext">
<p>Hello<p>
</div>
</div>
Another is outlined in this fiddle (the text only appears on hover, when the image fades)
.wrapper {
position: relative;
padding: 0;
width: 150px;
display: block;
}
.text {
position: absolute;
top: 0;
color: #f00;
background-color: rgba(255, 255, 255, 0.8);
width: 150px;
height: 150px;
line-height: 1em;
text-align: center;
z-index: 10;
opacity: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.text img {
top: 20px;
position: relative;
}
.text:hover {
opacity: 1;
}
}
img {
z-index: 1;
}
<a href="#" class="wrapper">
<span class="text">
<img src="http://prologicit.com/wp-content/uploads/2012/07/160px-Infobox_info_icon_svg-150x150.png" width="30" height="30"><br><br><br>
"Photo"<br>
Made:1999<br>
By: A. Miller<br>
150x150px
</span>
<img src="http://lorempixel.com/150/150">
</a>
I like this animate opacity fiddle but it may be over what you're looking for...
I am creating a div which will enclose a users name and when they hover over a profile image then it will display the name over the image, when I am doing this it does not center the div over the image solely which will be causing a problem when styling the website.
My CSS is below:
.miniProfileImage {
border-radius: 100%;
border: 3px dashed #28A745;
width: 100%;
max-width: 200px;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
opacity: 1;
display: block;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.img-container {
position: relative;
width: 50%;
}
.img-container:hover .miniProfileImage {
opacity: 0.3;
}
.img-container:hover .middle {
opacity: 1;
}
.middleText {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
A sample HTML mark-up can be seen here:
<div class='img-container'>
<img class='miniProfileImage' src='http://via.placeholder.com/500x500'>
<div class='middle'>
<p class='middleText'>Some Name</p>
</div>
</div>
I have also created a JS Fiddle to represent what is happening
.miniProfileImage {
border-radius: 100%;
border: 3px dashed #28A745;
width: 100%;
max-width: 200px;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
opacity: 1;
display: block;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.img-container {
position: relative;
width: 50%;
}
.img-container:hover .miniProfileImage {
opacity: 0.3;
}
.img-container:hover .middle {
opacity: 1;
}
.middleText {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<div class='img-container'>
<img class='miniProfileImage' src='http://via.placeholder.com/500x500'>
<div class='middle'>
<p class='middleText'>Some Name</p>
</div>
</div>
Thanks
That's because your surrounding <div class='img-container'> has a width that is wider than the image.
If you want the div to have the same size as the image, you can do the following:
.img-container {
position: relative;
display: inline-block;
}
.miniProfileImage {
border-radius: 100%;
border: 3px dashed #28A745;
width: 100%;
max-width: 200px;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
opacity: 1;
display: block;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.img-container {
position: relative;
display: inline-block;
}
.img-container:hover .miniProfileImage {
opacity: 0.3;
}
.img-container:hover .middle {
opacity: 1;
}
.middleText {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<div class='img-container'>
<img class='miniProfileImage' src='http://via.placeholder.com/500x500'>
<div class='middle'>
<p class='middleText'>Some Name</p>
</div>
</div>
please correct the CSS like this
.img-container {
position: relative;
width: 100%;
max-width: 210px;
}
and .middle {white-space:nowrap} you can give .miniProfileImage {max-width:100%} to image