I use some text on my slider images, I use some trick but I am something going wrong here is my css and html:
CSS
.banner {float:left; width:100%; position:relative;}
.container {margin:0 auto; width:200px;}
.inban {float:left; width:100%; position:absolute; z-index:99; top:0px; left:0px;}
HTML
<div class="banner">
<img src="banner-1.jpg" alt="">
<div class="inban">
<div class="container">
Test text
</div>
</div>
Please give me some idea how I add text over the image and in my container.
Putting the image in as a background image of the wrapping div would be easier, but in this scenario I see the images as content, and thus belongs in the HTML. We'll use that wrapping div as a container for absolute positioning.
HTML
<div class="banner">
<img src="http://dummyimage.com/600x400/000/CCC" alt="">
<div class="inban">
<div class="container image">
<h2><span>A Movie in the Park:<span class='spacer'></span><br /><span class='spacer'></span>Kung Fu Panda</span></h2>
</div>
</div>
CSS
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;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
Fixing Semantics
When an inline element breaks, the block breaks immediately after the last character in the line, and begins immediately flush left on the next line. Padding, in this case, does not help us.
To solve this, we'll apply some more spans on either side of the element to simulate that padding.
$(function() {
$("h2")
.wrapInner("<span>")
$("h2 br")
.before("<span class='spacer'>")
.after("<span class='spacer'>");
});
You can find working JSFiddle here
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo: Animated Text Overlay On Hover</title>
<style>
.box {
cursor: pointer;
height: 300px;
position: relative;
overflow: hidden;
width: 400px;
}
.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: 360px;
height: 240px;
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: 2.5em;
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);
}
</style>
</head>
<body>
<h1 style="margin:150px auto 50px auto">Demo: Animated Text Overlay On Hover</h1>
<div class="box"> <img src="http://placehold.it/400x300">
<div class="overbox">
<div class="title overtext"> Text Demo </div>
<div class="tagline overtext"> Hover Text is Load </div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46156385-1', 'cssscript.com');
ga('send', 'pageview');
</script>
</body>
</html>
I got the solution:
CSS
.banner{float:left; width:100%;position:relative; text-align:center;}
.container{margin:0 auto; width:960px;}
.inban{ width:100%; position:absolute; left:0px; top:0px;}
img{max-width:100%; height:auto;}
HTML
<div class="container">
<div class="banner">
<img src="banner-1.jpg" alt="">
<div class="inban">
Test text
</div>
</div>
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 am new in HTML, CSS. I want to have hover effect on an image in my website. The code is kind of working. However, when it ease out it is not as smooth as when it get enlarged. I want a smooth transition in both ways. Here I submit my css and html code. There is a big chance many things are wrongly or inefficiently used here. It would be really great if someone can help me out with this.
CSS
.about .block h2 {
padding-top: 35px;
padding-bottom: 20px;
margin: 0;
}
.about .block h4 {
font-size: 20px;
text-align: justify;
}
/*----------------------*/
.about .block img {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 50%;
}
.about .about-img {
overflow: hidden;
}
.about .about-img:hover img {
-webkit-transform: scale3D(1.1, 1.1, 1);
transform: scale3D(1.1, 1.1, 1);
}
.about .about-img img {
opacity: 1;
transition: all 0.2s ease-in-out;
}
.effect {
border: none;
margin: 0 auto;
}
.effect:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
HTML
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="block">
<div class="section-title">
<h2>ABOUT X</h2>
</div>
<h4> Here I will write some text next to the circular image. I want enlarged picture when mouse hover over on the image.
</h4>
</div>
</div>
</div>
<!-- .col-md-7 close -->
<div class="col-md-5 col-sm-12">
<div class="block">
<img class="effect" src="image.jpg" alt="Img">
</div>
</div>
<!-- .col-md-5 close -->
</div>
</div>
</section>
I think your problem lies on .effect class
You should have include the transition property on your .effect class
.effect {
border: none;
margin: 0 auto;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
That should do the transition when leaving your hover state.
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>
I want to make a hover effect, when hover the image like this:
On the Internet found many similar examples but they all either with jquery or js. I would like to know whether it is possible to do purely with css...
UPDATE: here's a code found, but it is too big :(
.view-content {
height: 330px;
}
h2.view-title {
font-size: 3rem;
font-weight: bold;
color: #7d7a7a;
text-align: center;
text-shadow: 0 0px 0px;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .view-mask, .view {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.view-info {
display: inline-block;
text-decoration: none;
padding:0;
text-align: center;
color: white;
font-size: 1.9rem;
font-weight: 600;
vertical-align: middle;
}
.view-effect .view-mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.3s ease-in-out;
}
.view-effect a.view-info {
position:relative;
top:-20px;
opacity: 0;
transition: opacity 0.3s 0s ease-in-out;
}
.view-effect:hover .view-mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.view-effect:hover a.view-info {
opacity:1;
transition-delay: 0.3s;
}
<div class="view view-effect">
<img src="http://storage7.static.itmages.ru/i/16/0708/h_1467979220_8325708_d41d8cd98f.png" height="200" width="300" alt=""> <p></p>
<div class="view-mask">
Show project
</div>
</div>
Checkout below code as what you want or just click on below link :-
https://jsfiddle.net/ananddeepsingh/99bop25r/
HTML
<div class="box"> <img src="http://placehold.it/400x300">
<div class="overbox">
<div class="title overtext"> CSS Script </div>
<div class="tagline overtext"> Animated Text Overlay On Hover </div>
</div>
</div>
CSS
.box {
cursor: pointer;
height: 300px;
position: relative;
overflow: hidden;
width: 400px;
}
.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: 360px;
height: 240px;
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: 2.5em;
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);
}
Yes you can do that using pure CSS. for that purpose you may use :after pseudo class as,
.img-wrapper {
position:relative;
display:inline-block;
overflow:hidden;
cursor:pointer
}
.img-wrapper .hover-div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
opacity:0;
display:inline-block;
text-align:center;
background:rgba(0,0,0,0.3);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.img-wrapper:hover .hover-div{
top:0;
opacity:1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.img-wrapper:hover img {
-webkit-filter:grayscale(1);
-moz-filter:grayscale(1);
filter:grayscale(1);
}
.mybutton{
background:#FFFFFF;
color:#111111;
padding:10px 20px;
border-radius:5px;
display:inline-block;
margin-top:100px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.mybutton:hover{
background:#111111;
color:#FFFFFF;
}
<div class="img-wrapper">
<img src="https://unsplash.it/200" >
<div class="hover-div">
<a class="mybutton">My Button</a>
</div>
</div>
Just use ':hover' after the element you want to show the effect on. For example, if you wanted to use it on the header you would create a new css tag called
header:hover{} and then you could put an opactiy of maybe 0.5 to make the object fade on hover. Hope this helps!
Yes it is possible only through HTML and CSS. Below there is an example code:
HTML:
<div class="imagebox">
<div class="transparent"><i class="fa fa-search" aria-hidden="true"></i>
<p>Zoom</p></div>
<img src="images/yourimage.jpg">
</div>
CSS:
.imagebox{
position: relative;
}
.imagebox:hover .transparent{
display: block;
}
.transparent{
background: rgba(0,0,0,0.5);
position: absolute;
height: 100%;
width: 100%;
display: none;
cursor: pointer;
}
.transparent i{
position: absolute;
left: 50%;
top: 30%;
color: #fff;
font-size: 20px;
}
.transparent p{
position: absolute;
left: 45%;
top: 50%;
color: #fff;
font-size: 20px;
}
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.