I've been trying to make a overlay hover effect on a website with pure css
<div class="col-md-4 port-show">
<img class="img-responsive" alt="" src="">
<h2 class=""></h2>
<ul>
<li></li>
<li></li>
</ul>
</div>
But I've run into the problem when I hover over the img that the overlay will not trigger. I know I have to do it differently, but just don't now how.
CSS:
:hover:after{
content: "";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: red;
border-radius: 6px;
border-color: transparent;
}
You can look here. Maybe this solution will be helpfull for you.
http://codepen.io/anon/pen/VKmxZw
.img-holder {
position: relative;
z-index: 1;
display: block;
width: 350px;
}
.img-holder img {
display: block;
width: 100%;
}
.img-holder:after {
content: " ";
width: 100%;
height: 100%;
background-color: red;
z-index: 2;
left: 0;
top: 0;
position: absolute;
opacity: 0;
}
.img-holder:hover:after {
opacity: 1;
}
<div class="col-md-4 port-show">
<span class="img-holder">
<img src="http://placehold.it/350x150" />
</span>
<h2 class=""></h2>
<ul>
<li></li>
<li></li>
</ul>
</div>
You can follow this and make your overlay effect
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
h2 {
color: #c55;
padding: 50px 0;
text-align: center;
text-transform: uppercase;
}
.container {
background: url("http://static.pexels.com/wp-content/uploads/2015/03/fog-forest-haze-4827-524x350.jpeg");
background-size: cover;
background-position: center;
position: relative;
margin: auto;
width: 200px;
height: 200px;
cursor: pointer;
overflow: hidden;
}
.container:hover .overlay {
opacity: 1;
width: 100%;
height: 100%;
}
.container:hover .overlay span {
opacity: 1;
-webkit-transition: 1.3s ease;
transition: 1.3s ease;
}
.container .overlay {
background: rgba(0, 0, 0, 0.5);
position: absolute;
margin: auto;
width: 0px;
height: 0px;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.container .overlay span {
color: #fff;
text-align: center;
position: absolute;
margin: auto;
width: 180px;
height: 30px;
line-height: 30px;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
}
<h2>Image Overlay Hover Effect</h2>
<div class="container">
<a href="#">
<div class="overlay">
<span>Click to see more...</span>
</div>
</a>
</div>
Some easy overlay code:
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.pic{ width:190px;
height:190px; opacity: 1;
filter: alpha(opacity=100);
background: url(http://www.corelangs.com/css/box/img/duck.png) no-repeat; }
.pic:hover { opacity: 0.3; filter: alpha(opacity=30);}
</style>
</head>
<body>
<div class="pic">
</div>
</body>
</html>
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 am new to programming and I want to make a website where I want to put a text to the left bottom corner of an image. How to put it there and how to let it stay there when the screen is resized. And is my code ok ? or should I change something ?
JSFIDDLE
.flex{
position: relative;
display: flex;
justify-content: space-evenly;
}
.container-one a{
position: relative;
}
img{
display: block;
width: 100%;
height: 100%;
}
.box-one{
position: absolute;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
opacity: 0;
transition: 0.5s ease;
}
.container-one:hover .box-one {
opacity: 1;
}
span{
text-decoration: none;
color: red;
float:
}
<div class="flex">
<div class="container-one">
<a href="#dog">
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/256x256/dog.png">
<div class="box-one">
<span>dog</span>
</div>
</a>
</div>
<div class="container-two">
</div>
</div>
you can do it with very simple css code.
Try this:
.box-one span {
position: absolute;
bottom: 0px;
}
You can add position: absolute with the bottom-left alignment to your .box-one span which is your text element
.box-one span {
position: absolute;
bottom: 0px;
left: 0px;
}
.flex {
position: relative;
display: flex;
justify-content: space-evenly;
}
.container-one a {
position: relative;
}
img {
display: block;
width: 100%;
height: 100%;
}
.box-one {
position: absolute;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
bottom: 0px;
left: 0px;
top: 0px;
opacity: 0;
transition: 0.5s ease;
}
.box-one span {
position: absolute;
bottom: 0px;
left: 0px;
}
.container-one:hover .box-one {
opacity: 1;
}
span {
text-decoration: none;
color: red;
}
<div class="flex">
<div class="container-one">
<a href="#dog">
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/256x256/dog.png">
<div class="box-one">
<span>dog</span>
</div>
</a>
</div>
<div class="container-two">
</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...
So, I have gallery that contains some photos. I want to make when the image hovered then some information of the person is shows up, the name of person and the their role.
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
color: white;
width: 100%;
height: 0;
transition: .5s ease;
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> HIS JOB </div>
</div>
</div>
I used overlay to make the info shows up, but why the text is not in order and its not on the photo? I want its in the middle bottom on the photo. any suggestion? thanks before.
below is updated snippet
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
position:relative;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 5px;
left: 5px;
right: 0;
overflow: hidden;
color: white;
width: calc(100% - 10px) ;
height: 0;
transition: .5s ease;
display:block;
background:rgba(0,0,0,0.5);
}
.flag:hover .biodata{
height:calc(100% - 10px);
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> President of INASGOC </div>
</div>
</div>
See this fiddle
CSS
.biodata {
z-index:100;
}
.flag:hover .biodata {
height:100%
}
Use this Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Shaki_Waterfall2.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">
<p style="padding:20px;">I am Mr. Alven</p>
</div>
</div>
</div>
</body>
</html>
Building my portfolio site and trying to show project name on hover over the image. I found some css people use to achieve this but does not work on my site for some reason. What could I be doing wrong?
.portfolioImage-half {
display: inline-block;
margin: 25px 5px;
width: 30%;
background-color: #111;
overflow: hidden
}
.portfolio-half {
width: 100%;
}
.portfolioImg {
transition: all .3s ease-in-out;
}
.portfolioImg:hover {
opacity: .2;
transform: scale(1.1);
cursor: pointer;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
}
.portfolioImage-half:hover span.text-content {
opacity: 1;
}
<div class="row">
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
<div class="row portfolioRow">
<div class="portfolioImage-half">
<img src="assets/portfolio/doug-fir-logo-for-instagran.jpg" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
<span class="text-content"><span>Place Name</span></span>
</div>
<div class="portfolioImage-half">
<img src="assets/portfolio/AmbeCreations-logo.jpg" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
</div>
</div>
</div>
</div>
Try using CSS Flexbox. Make your
.text-content a flex container using display: flex;
Give .portfolioImage-half position relative
Give width & height in %ages
Like:
.portfolioImage-half {
position: relative;
}
span.text-content span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
Have a look at the working snippet below:
.portfolioImage-half {
position: relative;
display: inline-block;
margin: 25px 5px;
width: 30%;
background-color: #111;
overflow: hidden
}
.portfolio-half {
width: 100%;
}
.portfolioImg {
transition: all .3s ease-in-out;
}
.portfolioImg:hover {
opacity: .2;
transform: scale(1.1);
cursor: pointer;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
span.text-content span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
}
.portfolioImage-half:hover span.text-content {
opacity: 1;
}
<div class="row">
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
<div class="row portfolioRow">
<div class="portfolioImage-half">
<img src="http://placehold.it/100x100" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
<span class="text-content"><span>Place Name</span></span>
</div>
<div class="portfolioImage-half">
<img src="http://placehold.it/100x100" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
</div>
</div>
</div>
</div>
Hope this helps!
No you cannot style the img alt attribute.
Try:
adding a "z-index: 1; position: absolute;" to the .portfolioImage-half:hover span.text-content class.
Then add a "z-index:0; position: relative;" to the .portfolioImage-half class
You will most probably need to position the "span.text-content" element by using "Left"/"Right" properties