I have text on top of an image that I'd like to fade in when the image is hovered over, while the image fades out. I've managed to get the transitions to work on the text and the image, but when I hover over the text, the image goes back to full opacity. I'm trying to make it so that when the text is hovered over, the image stays faded out. Here's my code:
.container img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
border: 2px solid white;
border-radius: 20px;
margin-bottom: 5px;
opacity: 1;
transition: .6s ease;
}
.container img:hover {
opacity: .4;
}
.gallery-image {
position: relative;
text-align: center;
font-weight: 700;
line-height: 2rem;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: .6s ease;
border: 1px solid;
}
.gallery-image:hover .text {
opacity: 1;
}
<div class="container">
<div class="gallery-image">
<img src="image.jpg" alt="image">
<div class="text">text</div>
</div>
</div>
if you switch the order and have the div before the img, this should achieve what you are looking for:
<div class="container">
<div class="gallery-image">
<div class="text">text</div>
<img src="image.jpg" alt="image">
</div>
</div>
Put the hover state on the the parent container .gallery-image.
.gallery-image:hover img {
opacity: .4;
}
.gallery-image:hover .text {
opacity: 1;
}
.container img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
border: 2px solid white;
border-radius: 20px;
margin-bottom: 5px;
opacity: 1;
transition: .6s ease;
}
.gallery-image:hover img {
opacity: .4;
}
.gallery-image:hover .text {
opacity: 1;
}
.gallery-image {
position: relative;
text-align: center;
font-weight: 700;
line-height: 2rem;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: .6s ease;
border: 1px solid;
}
<div class="container">
<div class="gallery-image">
<img src="image.jpg" alt="image">
<div class="text">text</div>
</div>
</div>
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>
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
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>