We are trying to get our new company-team page up and running. What we are trying to accomplish is to have employee images in <divs> so they resize dynamically, and then on mouse over have the image dimmed and the employee bio visible. Something similar to the employee mouseover found here: http://studiompls.com/about/
What has been cobbled together that sort of works:
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
position:relative;
background: #6E6E6E;
color: #fff;
font-weight:bold;
top:0;
left:0;
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.gallery:hover {
opacity: .6;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
position: relative;
top: 50%;
transform: translateY(-50%);
vertical-align:middle;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
vertical-align:middle;
position:relative;
}
.responsive:hover{
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.wrapper{
position:relative;
background: #6E6E6E;
color: #fff;
font-weight:bold;
top:0;
left:0;
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.wrapper:hover{
opacity: .6;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
</style>
</head>
<body>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<img src="images/Gary.jpeg" alt="" width="300" height="200">
</div>
</div>
</div>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<img src="images/Andy.jpeg" alt="" width="300" height="200">
</div>
</div>
</div>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<img src="images/Chris.jpg" alt="" width="300" height="200">
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<div class="clearfix"></div>
<div style="padding:6px;">
</div>
</body>
</html>
The overlaid <div>s do no stay lined up, and if we add text to the background <div> it separates them further. Anyone see what's missing here?
Try this HTML and CSS
Extra CSS
.container {
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
background-color: black;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
UPdated HTML
<div class="gallery container">
<img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container1 {
display: flex;
flex-wrap: wrap;
}
div.gallery {
position:relative;
background: #6E6E6E;
color: #fff;
font-weight:bold;
top:0;
left:0;
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.gallery:hover {
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
position: relative;
top: 50%;
transform: translateY(-50%);
vertical-align:middle;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
width:33.3%;;
vertical-align:middle;
position:relative;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.9%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.wrapper{
position:relative;
background: #6E6E6E;
color: #fff;
font-weight:bold;
top:0;
left:0;
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.wrapper:hover{
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.container {
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
background-color: black;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<body>
<div class="container1">
<div class="responsive">
<div class="wrapper">
<div class="gallery container">
<img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</div>
</div>
<div class="responsive">
<div class="wrapper">
<div class="gallery container">
<img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</div>
</div>
<div class="responsive">
<div class="wrapper">
<div class="gallery container">
<img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<div class="clearfix"></div>
<div style="padding:6px;"></div>
</div>
</body>
</html>
Related
So I'm a little stuck with the hover effects I'm trying to make 2 hover effects work at the same time. My goal is to have a frosted glass effect with text overlay. Here is my codepen https://codepen.io/kyannashanice/pen/mdRjmry
Stylesheet:
.product {
width: 400px;
height: 400px;
}
.container {
position: relative;
width: 400px;
height: 400px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 99;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/* Blur Hover Effect */
img {
position: absolute;
filter: none;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
border-radius:5px;
border:1px solid black;
}
img:hover {
opacity: 0.8;
filter: -webkit-filter: blur(4px);
filter: blur(4px);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
HTML:
<p>Both hover effects applied but one working over the other</p>
<div class="container">
<img src="https://www.mydomaine.com/thmb/aA3TdLIHHviKBrIBVLExBBnQjSA=/1790x1790/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/string-of-pearls-product2-2f5350b5894642ea8942a2726ee20f13.jpg" class="product">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<br>
<br>
<br>
<p>No text overlay</p>
<img src="https://www.mydomaine.com/thmb/aA3TdLIHHviKBrIBVLExBBnQjSA=/1790x1790/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/string-of-pearls-product2-2f5350b5894642ea8942a2726ee20f13.jpg" class="product">
Both overlays work fine on their own but when they overlap only the text overlay will show. I would appreciate any help or direction if anyone knows how to make both effects go off at the same time.
Thank you!
The problem is that the hover is set to img. First you get the .overlay class that covers the photo and therefore the hover in the photo does not work.
Try add hover to container: ( instead img:hover)
.container:hover img{
opacity: 0.8;
filter: -webkit-filter: blur(4px);
filter: blur(4px);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
Markup HTML
Photo with text
<div class="container">
<img src="" class="product">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Photo without text
<div class="container">
<img src="" class="product">
</div>
I have one section which has an image & some text.
What I want is to hover over a div and it should show little rise animation effect on the div itself.
It's working, but while the animation is playing, I've noticed that the text gets a little size change.
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height:140px;
margin-bottom:20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img{width:300px; height:200px;}
.box-cards:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>
add hover styles to box-image instead of box-cards, check below
Styles
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height:140px;
margin-bottom:20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img{width:300px; height:200px;}
.box-image:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
Dom
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>
try this
use .box-image instead of .box-card:hover
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height: 140px;
margin-bottom: 20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img {
width: 300px;
height: 200px;
}
.box-image:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>
You have to change .box-cards img:hover instead of .box-cards:hover
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height:140px;
margin-bottom:20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img{width:300px; height:200px;}
.box-cards img:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>
Thanks for reading. The problem with my code started when I added the hover effect on the images since then the layout stopped being responsive and images just clutter on top of each other when I resize the browser. Any help will be valued, since I am not able to find a solution since days :(
http://wall-e.blue/tobias/index.html
#col_1 {
float:right;
padding: 3%;
width: 24%;
max-width: 100%;
height: auto; }
#col_2 {
float: left;
padding: 3%;
width: 24%;
text-align: left;
max-width: 100%;
height: auto;
}
.wow {
position:relative;
width: 330px;
height:510px;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.wow img {
position:relative;
top:0;
left:0;
z-index:1
}
.overlay {
font-family: arial;
font-size: 1em;
color: black;
padding-top: 10px;
z-index:2;
opacity:0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.wow:hover > .overlay {
opacity:1;
width:560px;
height:310px height:auto;
}
#media all and (max-width : 768px) {
#col_1 {
width: 94%;
padding: 1%;
}
#col_2 {
width: 94%;
padding: 1%;
}
<body>
<br>
<br>
<div id="title">
<span class="titulo" > Tobias Willmann</span>
<br>
<br>
<span class="mail" > </span>
</div>
<div id="links">
<ul>
<li> About</li>
<li>Contact</li>
</ul>
<br>
<br>
<div id="col_1">
<div class="wow">
<img src="Katerinaneu_web.jpg" />
<div class="overlay">2016_hahahhaha</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href= "easter.html" > <img src= "easter_web.jpg" /> </a>
<div class="overlay">2016_nnn</div>
</div>
</div>
<div id="col_2">
<div class="wow">
<img src="Marina_closeup.jpg" />
<div class="overlay">2015_nnn</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<img src="adriana_web.jpg" />
<div class="overlay">2015_i know you love</div>
</div>
</div>
.wow {
height:510px;
}
At Marina closeup
Makes the image go on top of the other image as I can see so far.
How can I get a 2 by 2 layout for my images instead of a single images stacking through webpage with CSS, if possible i would like a method that does not require javascript as i have no knowledge or experience in regards to it. For some reason in when i run this code using the snippet it shows me the 2 by 2 layout i would like to have but this isn't the case when i try running my code on e.g. chrome.
.box {
cursor: pointer;
height: 281px;
position: relative;
overflow: hidden;
width: 500px;
margin-left:150px;
display: inline-block;
margin-bottom: 35px;
float:left;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: #304562;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 500px;
height: 281px;
padding: 130px 20px;
}
.box:hover .overbox { opacity: 1; }
.box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box .title {
font-size: 20px;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.box:hover .title,
.box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.box .tagline {
font-size: 0.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.box:hover .tagline,
.box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
</div>
<div class="box"> <img src="../images/Ferrari2.jpg" >
<div class="overbox">
<div class="title overtext">Ferrari 458 Italia Spider</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
</div>
<div class="box"> <img src="../images/Italia.jpg">
<div class="overbox">
<div class="title overtext">Ferrari 458 Italia</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
</div>
<div class="box"> <img src="../images/R35-2.jpg">
<div class="overbox">
<div class="title overtext">Nissan R35 GTR</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
<div class="box"> <img src="../images/P1.jpg">
<div class="overbox">
<div class="title overtext">Mclaren P1</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
<div class="box"> <img src="../images/GT3.jpg">
<div class="overbox">
<div class="title overtext">Porsche GT3 </div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
<div class="box"> <img src="../images/R8-2.jpg">
<div class="overbox">
<div class="title overtext">Audi R8</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
In HTML you can simply add the br attribute. This will allow you to add a line break with the images. A better way of doing it is by making the image 100% in width to the parent class.
The vertical alignment of the text on :hover isn't working . Also after hovering, the whole area of posts should be cover with pointer cursor and should be clickable, but it isn't.
HTML
<div class="photoset post-background">
<div class="imgoverlay text-light">
<a href="{Permalink}">
<div class="photos">
{block:Photos}
<img alt="" src="{PhotoURL-500}">
{/block:Photos}
</div>
<div class="overlay">
<span class="overlaycolor"></span>
<div class="overlayinfo">
{block:ContentSource}
<h6>{SourceTitle}</h6>
{block:ContentSource}
</div>
</div>
</a>
</div>
</div>
CSS
.imgoverlay {
position: relative;
overflow: hidden;
display: block;
max-width: 100%;
}
.imgoverlay img {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
.imgoverlay .overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(Opacity=0)";
-webkit-transition: opacity .3s ease;
-moz-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
-ms-transition: opacity .3s ease;
transition: opacity .3s ease;
}
.imgoverlay:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(Opacity=100)";
}
.imgoverlay .overlaycolor {
width: 100%;
height: 100%;
background: {color:Post Hover};
};
Example http://www.jnck.sk/
Thanks for any help!
Use span with display:block instead of div inside link. Block elements like div shouldn't be in inline blocks.
For vertical align of text you can use i.e. this:
.overlayinfo {
position: relative;
top: 50%;
transform: translateY(-50%);
}
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/