I have this piece of code:
<style>
.zoomimg img{
margin-top:2px;
margin-bottom:2px;
margin-right: 70px;
margin-left: 4px;
height:180px;
width:520px;
-moz-transition:-moz-transform 0.3s ease-in;
-webkit-transition:-webkit-transform 0.3s ease-in;
-o-transition:-o-transform 0.3s ease-in;
}
.zoomimg img:hover{
opacity: 0.8;
filter: alpha(opacity=40);
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
}
</style>
now what it does is great. but... when it enlarges , it enlarges the most right column and the picture in it.
resulting, the website gets wider...
but i don't want that.
how can i code it so the hover enlarge moves to the left. respectively and it doesn't enlarge the current browser page?
#container {
border: 2px solid red;
}
.zoomimg img {
margin-top: 2px;
margin-bottom: 2px;
margin-right: 70px;
margin-left: 4px;
height: 180px;
width: 520px;
overflow: hidden;
border: 2px solid black;
-moz-transition: -moz-transform 0.3s ease-in;
-webkit-transition: -webkit-transform 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.zoomimg img:hover {
opacity: 0.8;
filter: alpha(opacity=40);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
<div id="container">
<div class="zoomimg">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" />
</div>
</div>
Related
I create a shape in CSS
.a {
transform: scale(1);
border-radius:100%;
width:100px;
height:100px;
background-color:#444;
transition: all .5s;
}
On hover I'm going to increase the scale over .5s.
.a:hover {
transform: scale(1.2);
}
How can I set a delay and return back to the original scale?
Thanks
Is this the kind of effect you're looking for? You can use the delay property for the translation rule.
.a {
border-radius: 100%;
color: #333;
font-weight: bold;
font-size: 1.5em;
padding: 2em;
width: 100px;
height: 100px;
background-color: #e3e3e3;
transform: scale(1);
transition: all .5s 2s;
}
.a:hover {
transform: scale(1.2);
transition: all .5s 0s;
}
<p class="a">Hello World.</p>
There is a tutorial for transition:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
And Try ıt:
transition: all 0.5s ease-out;
I set the width of two separate divs (circle_bg_l and circle_bg_r) both to 7vh, however one of them appears to be bigger. Here is the code:
#charset "utf-8";
/* CSS Document */
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-image: url(html-bg2.png);
background-size: 0.5%;
background-repeat: repeat;
background-color: #111111;
overflow: auto;
}
#headbar_left {
position: fixed;
left: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 100% -50%;
-o-transform-origin: 100% -50%;
-moz-transform-origin: 100% -50%;
-webkit-transform-origin: 100% -50%;
-ms-transform-origin: 100% -50%;
}
#headbar_right {
position: fixed;
right: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
}
#circle_bg_l {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
left: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
#circle_bg_r {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
right: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.show {
background-color: #8704ff !important;
}
#circle_logo {
position: fixed;
z-index: 1;
width: 14vh;
height: 14vh;
border-radius: 7vh;
background-color: #161616;
left: calc(50vw - 7vh);
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
border: 1vh solid #8704ff;
text-align: center;
line-height: 14vh;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
background-image: url(html-logo.png);
background-size: 100%;
}
.l_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: left;
}
.l_menu:hover {
color: #161616;
background-color: #8704ff;
}
.r_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: right;
}
.r_menu:hover {
color: #161616;
background-color: #8704ff;
}
.spin {
transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.collapse {
transform: scaleX(0);
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
}
.move_left {
transform: translateX(calc(7vh - 50vw));
-o-transform: translateX(calc(7vh - 50vw));
-moz-transform: translateX(calc(7vh - 50vw));
-webkit-transform: translateX(calc(7vh - 50vw));
-ms-transform: translateX(calc(7vh - 50vw));
}
.move_fast {
transition: all 0.2s ease-in-out !important;
-o-transition: all 0.2s ease-in-out !important;
-moz-transition: all 0.2s ease-in-out !important;
-webkit-transition: all 0.2s ease-in-out !important;
-ms-transition: all 0.2s ease-in-out !important;
}
#circle_logo:hover {
transition: all 0.15s ease-in-out !important;
-o-transition: all 0.15s ease-in-out !important;
-moz-transition: all 0.15s ease-in-out !important;
-webkit-transition: all 0.15s ease-in-out !important;
-ms-transition: all 0.15s ease-in-out !important;
border-radius: 0;
}
#body_content {
position: absolute;
width: calc(100vw - 28vh);
height: 105vh;
margin-right: 14vh;
margin-left: 14vh;
background-color: #161616;
z-index: -1;
box-shadow: 0 3vh 10vh 4vh black;
color: white;
font-family: "Impact";
font-size: 10vh;
padding-top: 21vh;
}
#t_s {
font-size: 2vh;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="uh.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>uh</title>
</head>
<body>
<div id="top"></div>
<div id="headbar_left">
<div class="l_menu">FIRST</div>
<div class="l_menu">SECOND</div>
<div id="l_mid" class="l_menu">THIRD</div>
</div>
<div id="headbar_right">
<div class="r_menu">SIXTH</div>
<div class="r_menu">FIFTH</div>
<div id="r_mid" class="r_menu">FOURTH</div>
</div>
<div id="circle_bg_l"></div><div id="circle_logo"></div><div id="circle_bg_r"></div>
<div id="body_content"><center>WHAT IS THIS PAGE?<p id="t_s">no one knows</center></div>
</body>
<script>
var a = 1;
function remove() {
if (a === 0) {
$("#circle_logo").removeClass('move_left');
setTimeout(function() {
$("#circle_logo").removeClass('move_fast');
$("#circle_logo").removeClass('spin');
$("#headbar_left, #headbar_right").removeClass('collapse');
$("#circle_logo").css("background-image", "url(html-logo.png)");
$("a").attr("href", "uh.html");
}, 300);
a = 1;
}
}
function add() {
if (a === 1) {
$("#circle_logo").addClass('spin');
$("#headbar_left, #headbar_right").addClass('collapse');
setTimeout(function() {
$("#circle_logo").addClass('move_left');
$("#circle_logo").addClass('move_fast');
$("#circle_logo").css("background-image", "url(up-arrow.png)");
$("a").attr("href", "#top");
}, 400);
a = 0;
}
}
$(document).scroll(function() {
if($(window).scrollTop() > 0) {
add();
}
else {
remove();
}
});
$("#l_mid").mouseover(function() {
$("#circle_bg_l").addClass("show");
});
$("#l_mid").mouseout(function() {
$("#circle_bg_l").removeClass("show");
});
$("#r_mid").mouseover(function() {
$("#circle_bg_r").addClass("show");
});
$("#r_mid").mouseout(function() {
$("#circle_bg_r").removeClass("show");
});
</script>
</html>
I also just noticed after running the snippet that the divs do not line up the same way they do when I open the webpage in a browser. Any idea how to fix these problems? Thanks!
They are the same size in firefox, chrome and safari (latest versions on OS X) - according to the snippet you posted. They also appear to my eyes the same size.
That said, your browser or device might be showing some differences, one possibility is your use of VW. You have 2 header portions, each using 51VW next to each other. That's roughly the equivalent of having 2 sections use 51% of the width, and not add to 100vw.
I would try changing those to 50VW each and test again.
I am trying to use below buttons for my web pages. How to use it for setting hyper link in these buttons ?
#import url('http://fonts.googleapis.com/css?family=Roboto+Condensed');
.preserve-3d {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
body {
padding: 0;
margin: 0;
border: 0;
overflow-x: none;
background-color: #ffffff;
font-family: Roboto Condensed, sans-serif;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
}
.back {
width: 33%;
height: 200px;
float: left;
background-color: #eeeeee;
border: 10px;
border-color: #ffffff;
border-style: solid;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
counter-increment: bc;
padding: 0px 5px 5px 5px;
}
.back:before {
content: counter(bc) "_";
position: absolute;
padding: 10px;
}
#media screen and (max-width: 1260px) {
.back {
width: 50%;
}
}
#media screen and (max-width: 840px) {
.back {
width: 100%;
}
}
.button_base {
margin: 0;
border: 0;
font-size: 18px;
position: relative;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -100px;
width: 200px;
height: 50px;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-user-select: none;
cursor: default;
}
.button_base:hover {
cursor: pointer;
}
/* ### ### ### 01 */
.b01_simple_rollover {
color: #000000;
border: #000000 solid 1px;
padding: 10px;
background-color: #ffffff;
}
.b01_simple_rollover:hover {
color: #ffffff;
background-color: #000000;
}
/* ### ### ### 02 */
.b02_slide_in {
overflow: hidden;
border: #000000 solid 1px;
}
.b02_slide_in div {
position: absolute;
text-align: center;
width: 100%;
height: 50px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px;
}
.b02_slide_in div:nth-child(1) {
color: #000000;
background-color: #ffffff;
}
.b02_slide_in div:nth-child(2) {
background-color: #000000;
transition: top 0.1s ease;
-webkit-transition: top 0.1s ease;
-moz-transition: top 0.1s ease;
top: -50px;
}
.b02_slide_in div:nth-child(3) {
color: #ffffff;
transition: opacity 0.1s ease;
-webkit-transition: opacity 0.1s ease;
-moz-transition: opacity 0.1s ease;
opacity: 0;
}
.b02_slide_in:hover div:nth-child(2) {
top: 0px;
transition: top 0.1s ease;
-webkit-transition: top 0.1s ease;
-moz-transition: top 0.1s ease;
}
.b02_slide_in:hover div:nth-child(3) {
opacity: 1;
transition: opacity 0.1s ease;
-webkit-transition: opacity 0.1s ease;
-moz-transition: opacity 0.1s ease;
}
/* ### ### ### 03 */
.b03_skewed_slide_in {
overflow: hidden;
border: #000000 solid 1px;
}
.b03_skewed_slide_in div {
position: absolute;
text-align: center;
width: 100%;
height: 50px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px;
}
.b03_skewed_slide_in div:nth-child(1) {
color: #000000;
background-color: #ffffff;
}
.b03_skewed_slide_in div:nth-child(2) {
background-color: #000000;
width: 230px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform: translate(-250px, 0px) skewX(-30deg);
-webkit-transform: translate(-250px, 0px) skewX(-30deg);
-moz-transform: translate(-250px, 0px) skewX(-30deg);
}
.b03_skewed_slide_in div:nth-child(3) {
color: #ffffff;
left: -200px;
transition: left 0.2s ease;
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
}
.b03_skewed_slide_in:hover div:nth-child(2) {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transform: translate(-15px, 0px) skewX(-30deg);
-webkit-transform: translate(-15px, 0px) skewX(-30deg);
-moz-transform: translate(-15px, 0px) skewX(-30deg);
}
.b03_skewed_slide_in:hover div:nth-child(3) {
left: 0px;
transition: left 0.30000000000000004s ease;
-webkit-transition: left 0.30000000000000004s ease;
-moz-transition: left 0.30000000000000004s ease;
}
/* ### ### ### 04 */
.b04_3d_tick {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
perspective-origin: center top;
-webkit-perspective-origin: center top;
-moz-perspective-origin: center top;
}
.b04_3d_tick div {
position: absolute;
text-align: center;
width: 100%;
height: 50px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px;
border: #000000 solid 1px;
}
.b04_3d_tick div:nth-child(1) {
color: #000000;
background-color: #ffffff;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
}
.b04_3d_tick div:nth-child(2) {
color: #ffffff;
background-color: #000000;
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform-origin: left top;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
}
.b04_3d_tick:hover div:nth-child(1) {
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
background-color: rgba(0, 0, 0, 0.5);
}
.b04_3d_tick:hover div:nth-child(2) {
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
/* ### ### ### 05 */
.b05_3d_roll {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
.b05_3d_roll div {
position: absolute;
text-align: center;
width: 100%;
height: 50px;
padding: 10px;
border: #000000 solid 1px;
pointer-events: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.b05_3d_roll div:nth-child(1) {
color: #000000;
background-color: #000000;
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform-origin: 50% 50% -25px;
-webkit-transform-origin: 50% 50% -25px;
-moz-transform-origin: 50% 50% -25px;
}
.b05_3d_roll div:nth-child(2) {
color: #000000;
background-color: #ffffff;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform-origin: 50% 50% -25px;
-webkit-transform-origin: 50% 50% -25px;
-moz-transform-origin: 50% 50% -25px;
}
.b05_3d_roll:hover div:nth-child(1) {
color: #ffffff;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
.b05_3d_roll:hover div:nth-child(2) {
background-color: #000000;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
}
/* ### ### ### 06 */
.b06_3d_swap {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
<div class="back">
<div class="button_base b02_slide_in">
<div>01_Button</div>
<div></div>
<div>01_Button</div>
</div>
</div>
<div class="back">
<div class="button_base b03_skewed_slide_in">
<div>01_Button</div>
<div></div>
<div>01_Button</div>
</div>
</div>
<div class="back">
<div class="button_base b04_3d_tick">
<div>01_Button</div>
<div>01_Button</div>
</div>
</div>
<div class="back">
<div class="button_base b05_3d_roll">
<div>02_Button</div>
<div>01_Button</div>
</div>
</div>
I want to use these buttons as link for download button. How to use it for setting hyper link in these buttons ? Any help will be appreciated.
You can replace button with an a tag and style it like a button, like this:
01_Button
EDIT: Sorry I didn't see you were using divs. Add you link inside the div, like this:
<div class="button-style">01_Button</div>
<div class="button_base b02_slide_in">
<div>01_Button</div>
<div></div>
<div><a class="link" href="#">01_Button</a></div>
</div>
<style>
.link:hover
{
color:#fff;
text-decoration: none;
}
</style
So i'm trying to create a portfolio with an hover with text.
I tried to make it a little responsive with bootstrap, but I can't get it right how the image is centered in the div when you scaling down.
I really wanna get something like this ( https://www.weblounge.be/en/ )
With an high of 100% and a width of 100% to always show the full size of the image when resizing.
I guess I do something wrong but can't find the issue.
my buildup is
<div class="col-lg-4 col-sm-6 nopad">
<div class="box">
<img src="http://i.imgur.com/DuUtNax.jpg">
<div class="overlay">
<h5>Random website</h5>
<p class="text">Random text</p>
</div>
</div>
</div>
and the css
.container {
background-color: #fff;
padding: 100px 0px 100px 0px;
.nopad {
padding-left: 0px;
padding-right: 0px;
}
.box {
cursor: pointer;
height: 400px;
position: relative;
overflow: hidden;
width: 100%;
text-align: left;
img {
position: absolute;
width: 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;
}
.overlay {
background: rgba(0, 0, 0, 0.7);
position: absolute;
left: 0;
z-index: 100;
opacity: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
padding-top: 20%;
-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;
h5 {
color:#fff;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
transform: translateY(60px);
-webkit-transform: translateY(60px);
}
p {
color: #fff;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
transform: translateY(60x);
-webkit-transform: translateY(60px);
}
.button-white {
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
transform: translateY(60px);
-webkit-transform: translateY(60px);
margin: 0px;
}
}
&:hover img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
&:hover .overlay {
opacity: 1;
h5 {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
p {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
}
}
}
My codepen to show what is wrong: http://codepen.io/denniswegereef/pen/MwJXde
You need to use the product images as a background-image in a product div:
<div class="box">
<div class="product-image" style="background-image: url(http://i.imgur.com/DuUtNax.jpg)"></div>
...
</div>
and then change your css from .box img, to .box .product-image:
.box {
.product-image {
position: absolute;
width: 100%;
height:100%;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
background-repeat: no-repeat;
background-size: cover;
}
&:hover .product-image {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
http://jsfiddle.net/8pfjdmb4/
I'm trying to make an image fade and then text appear centered over the image (Horizontally and vertically) but I can't get it to vertically center.
Here's my CSS:
<style type="text/css">
a img {
border: 0px;
opacity: 1;
filter: alpha(opacity=100);
-o-transition: opacity 1.5s linear;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;}
a:hover img {
/*60 80*/
opacity: .40;
filter: alpha(opacity=50);
-o-transition: opacity .1s linear;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity 1.5s linear;}
#wrapper .text {
visibility:hidden
}
#wrapper:hover .text {
position: absolute;
visibility:visible;
opacity: .60;
color:white;
font-size:24px;
font-weight:bold;
text-align:center;
width: 100%
}
</style>
Here's the HTML part (it's for Tumblr):
<div id="wrapper">{LinkOpenTag}<img src="{PhotoURL-400}" alt=" {PhotoAlt}" />{LinkCloseTag}<p class="text">REBLOG</p></div>
HTML:
<div id="wrapper">
<a href="{reblogurl}">
<img src="{PhotoURL-400}" alt="{PhotoAlt}" />
<p class="text">REBLOG</p>
</a>
</div>
CSS:
a
{
display: inline-block;
position: relative;
}
a img
{
height: 200px; // demo prop
widht: 150px; // demo prop
border: 0px;
opacity: 1;
filter: alpha(opacity=100);
-o-transition: opacity 1.5s linear;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
}
a:hover img
{
/*60 80*/
opacity: .40;
filter: alpha(opacity=50);
-o-transition: opacity .1s linear;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity 1.5s linear;
}
a .text
{
opacity: .60;
position: absolute;
font-size:24px;
font-weight:bold;
text-align:center;
color: red;
display: none;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%); /* IE 9 */
-webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
}
a:hover .text
{
display: block;
}
Demo: http://jsfiddle.net/jo_asakura/BfRpp/
Try using the vertical-align property.
vertical-align: middle;