Responsive columns not working when hover effect added - html

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.

Related

Crossfading image hides other elements

I'm trying to make two images crossfade when you hover over them, and it works besides the fact that it hides the text I need. The text should be under the image instead of behind it. How can I fix this?
#center {
text-align: center;
}
#under {
text-align: center;
margin: 0;
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
#crossfade {
position: relative;
}
#crossfade img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#crossfade img.top:hover {
opacity: 0;
}
img {
margin-right: 3%;
max-width: 65%
}
#goofy {
margin: 0;
margin-bottom: 40px;
}
<div id="center">
<div id="crossfade">
<img id="goofy" src="https://inpulse.eli328.repl.co/half.png" alt="half" class="bottom">
<img id="goofy" src="https://inpulse.eli328.repl.co/active.png" alt="active" class="top">
</div>
<p id="under">
The Inpulse creates a powerful electric charge that when reaching sufficient levels, creates a bright arc of lightining between the two prongs. The handheld device will definitely satisfy its user.
</p>
</div>

Give #crossfade width & height.
#center {
text-align: center;
}
#under {
text-align: center;
margin: 0;
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
#crossfade {
position: relative;
width: 500px;
height: 330px;
}
#crossfade img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#crossfade img.top:hover {
opacity: 0;
}
img {
margin-right: 3%;
max-width: 65%
}
#goofy {
margin: 0;
margin-bottom: 40px;
}
<div id="center">
<div id="crossfade">
<img id="goofy" src="https://inpulse.eli328.repl.co/half.png" alt="half" class="bottom">
<img id="goofy" src="https://inpulse.eli328.repl.co/active.png" alt="active" class="top">
</div>
<p id="under">
The Inpulse creates a powerful electric charge that when reaching sufficient levels, creates a bright arc of lightining between the two prongs. The handheld device will definitely satisfy its user.
</p>
</div>

css dynamically overlaid <divs> with mouse-over opacity

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>

Background image has transition time but position transition does not

So I am looking to have a div's (buttons) background image change on hover AND move 20px left and 20px up on hover. Right now when I hover the div the background image changes on a 0.7s transition like I want it to, but the position change does not have the transition time. Any help on this would be awesome
.buttons:hover{
background: transparent;
background-image: url('image2');
right: 20px;
top: -20px;
}
.buttons{
position: relative;
width:95%;
height: 145px;
background-image: url('image1');
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.buttons h3{
position: relative;
top: 50px;
}
.buttoncontainer{
width: 100%;
text-align: center;
}
.buttoncontainer a{
text-decoration: none;
}
<div class="buttoncontainer">
<a href="#">
<div class="buttons">
<h3 style="font-family: helvetica;color:#13506D;">General IP Services <img src="arrow.png" alt="">
</h3>
</div>
</a>
</div>

In order for the animation to work, it needs to transition from something, to your new location. Define top: 0; and right: 0; before the transition.
.buttons:hover{
background: transparent;
background-image: url('image2');
right: 20px;
top: -20px;
}
.buttons{
position: relative;
width:95%;
height: 145px;
right: 0; /* Define right */
top: 0; /* Define top */
background-image: url('image1');
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.buttons h3{
position: relative;
top: 50px;
}
.buttoncontainer{
width: 100%;
text-align: center;
}
.buttoncontainer a{
text-decoration: none;
}
<div class="buttoncontainer">
<a href="#">
<div class="buttons">
<h3 style="font-family: helvetica;color:#13506D;">General IP Services <img src="arrow.png" alt="">
</h3>
</div>
</a>
</div>

Align Icons on center of a picture

I'm trying to build a tumblr theme from scratch (http://themeexp1.tumblr.com/) and I'm having sobre trouble on aligning the Like, Reblog and Notes icons on the center(vertically and horizontally) of the image when you hover it.
I've tried many different ways but none of them seems to be working.
The icons and the image are inside a container.
CSS
.container, .container img{
width: 350px;
float: left;
}
.container{
margin-bottom: 14px;
}
.container img{
outline: 6px solid #C8C8C8;
outline-offset: -6px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.container-overlay{
width: 100%;
height: 100%;
background-color:white;
opacity: 0;
position:absolute;
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
-o-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
.container:hover .container-overlay{
opacity: 0.5;
}
.container:hover img{
outline: 6px solid rgba(200,200,200,0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.icons{
opacity: 0;
position: absolute;
}
.icons li{
float: left;
padding: 10px;
}
.container:hover .icons{
opacity: 1;
}
HTML
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="icons">
<ul>
<li>{ReblogButton color="red" size="30"}</li>
<li>{LikeButton color="red" size="30"}</li>
<li>{NoteCount}</li>
</ul>
</div>
{block:Photo}
<li><a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a> </li>
{/block:Photo}
</div>

You could do something like this:
.icons ul {
margin:0;
padding: 0;
}
.icons {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.icons li {
float: none;
display: inline-block;
}
Rather than keep the float: none;, just remove the original float declaration.

li element width image in it - li height is wrong

Take a look at this: http://jsfiddle.net/8D4f4/1/
The problem is that the li-element is too high. You can see that the list element got a grey background. You can see the grey under the image.
The question is. Why is the li element higher than the image?
I need the li element to have the same height as the image.
html
<div id="content">
<ul id="references-all" class="references">
<li data-id="online">
<img src="http://s1.directupload.net/images/140627/779m36rh.jpg"
width="324" height="240" class="references-images">
<div class="description">
<img src="http://s14.directupload.net/images/140627/z49aajek.png">
<div>
<p>Lorem Ipsum Lorem</p>
<img src="http://s1.directupload.net/images/140627/g8yce4ta.png"
width="28" height="27" class="description-arrow">
</div>
</div>
</li>
</ul>
</div>
css
#content .references {
margin-bottom: 50px;
max-width: 980px;
width: 100%;
}
#content .references li {
background-color: darkgrey;
float: left;
margin: 1px;
max-width: 404px;
min-width: 225px;
overflow: hidden;
position: relative;
width: 33%;
}
#content .references li:hover > .description{
background-color: #78785a;
height:100px;
}
#content .references li .references-images {
height: auto;
width: 100%;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.description {
bottom: 0;
color: #ffffff;
display: block;
height: 50px;
overflow: hidden;
padding: 7px 0 0 5px;
position: absolute;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
width: 100%;
}
.description p {
color: #ffffff;
display: block;
float: left;
font-size: 0.800em;
margin: 0;
padding-bottom: 15px;
padding-top: 10px;
width: 85%;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.description .description-arrow {
float: left;
margin-top: 10px;
}

li's height is greater than img's, because img's layout is similar to inline-block and it positions img's bottom edge to the text's baseline which is causing spacing to appear for the text descenders. In your case you can just add vertical-align property to the img element to remove spacing below the image :
img { vertical-align:top; }
JSFiddle

set display:block on your <li> and your <img>
#content .references li {
display:block;
}
#content .references li .references-images {
display:block;
}
Fixed Fiddle