How do I add a transition to this rollover?
Here is my css so far:
.img-container {
width: 401px;
height: 267px;
position: relative;
}
.img-container:hover .square-icon {
display: block;
}
.square-icon {
opacity: .5;
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background: url(images/zoom-icon.png) center center no-repeat;
background-color: #FF3860;
cursor:pointer;
display:none;
}
And here is the html:
<div class="img-container">
<img alt="lorem" width="401" height="267" src="images/450-300-13.png">
<div class="square-icon"></div>
</div>
I know I need to add:
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
But I'm not sure where to add it?
You need to set the two states (normal and hover) of .square-icon to have different levels of opacity and then you can transition on opacity.
See my jsBin demo here
.img-container:hover .square-icon {
opacity: 1;
}
.square-icon {
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background: url(images/zoom-icon.png) center center no-repeat;
background-color: #FF3860;
cursor:pointer;
opacity: 0;
transition: display 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}
Related
I would like to have rotate and zoom efect on pictures here
http://cpband.itvp.eu/
, but i would like to keep them croped in the same box.
like here
http://cpband.itvp.eu/test.php
trick should be in
overflow: hidden;
, but I am not able to figureout how to make it work.
Thanks for the tips!
you may add the rotation to the container :
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover {
transform:rotate(15deg);
}
.grow:hover img {
width: 400px;
height: 400px;
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
or is only to the image ? Also, transform can do both(zoom&rotate)
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover img {
transform:rotate(15deg) scale(1.25);
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
Html:
<div id="container">
<img src="picture.jpg" id="picture" />
</div>
Css:
#container{
overflow:hidden;
width:100px;
height:100px;
}
#picture{
height:300px;
width:300px;
}
I'm trying to find a solution for a slight issue that I'm having with some CSS.
The goal is to switch from a square solid colored box, with centered text, to a circular image.
While what I have currently works, albeit clunkily I'm sure, the fact that both the colored div and the image end up the same size, means that there is a faint colored line surrounding the image. Is there a way to remedy this?
I thought I could scale the colored div at the same time, but it ends up scaling both.
<head>
<style>
.images-container{
position: relative;
width: 175px;
height: 175px;
margin-top: -191px;
}
.images-container > img{
display: block;
width: 175px;
height: 175px;
position: absolute;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.images-container > img:nth-child(1){
filter: alpha(opacity=100);
opacity: 1;
z-index: 0;
}
.images-container > img:nth-child(2){
filter: alpha(opacity=0);
opacity: 0;
z-index: 1;
}
.images-container:hover > img:nth-child(1){
filter: alpha(opacity=0);
opacity: 0;
z-index: 0;
border-radius:50%
}
.images-container:hover > img:nth-child(2){
filter: alpha(opacity=100);
opacity: 1;
z-index: 3;
border-radius:50%;
}
.textbg{
background: #007049;
position: relative;
width: 175px;
height: 175px;
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
}
.textbg:hover {
border-radius:50%;
}
.imgtransition{
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
margin-top:-191;
}
.textalign {
color:#fff;
line-height: 175px;
text-align:center;
}
</style>
<title></title>
</head>
<body>
<div class="textbg">
<p class="textalign">Family</p>
<div class="images-container"><img class="imgtransition" src=
"https://upload.wikimedia.org/wikipedia/commons/2/20/16x16.png">
<img class="imgtransition" src=
"http://image1.masterfile.com/em_t/06/50/52/623-06505245er.jpg"></div>
</div>
</body>
</html>
example in jsfiddle
Hi there add background transparent on your textbg hover
example:
.textbg:hover {
border-radius:50%;
background:transparent;
}
Hope it works.
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;
In Chrome and Safari, the text in this code (http://codepen.io/igdaloff/pen/cgCFt) wiggles subtly when hovered. I'd like the text to remain stable throughout the transition.
I've tried several alternative methods to accomplish this same effect (explained in this post), but the wiggle remains.
I need the text to remain vertically centered and the content to be completely fluid (percentages only). As long as those requirements are true, I'm open to any solutions. I'm using the most recent browser versions.
Thanks in advance.
HTML
<div class="work-home">
<ul>
<li>
<a href="">
<img src="..." />
<h4>Goats</h4>
</a>
</li>
</ul>
</div>
CSS
.work-home {
text-align: center;
}
.work-home li {
display: inline-block;
position: relative;
margin: 0 0 2em;
width: 100%;
}
.work-home li:hover a:before {
opacity: 1;
top: 5%;
left: 5%;
right: 5%;
bottom:5%;
}
.work-home li:hover h4 {
opacity:1;
}
.work-home img {
width: 100%;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.work-home a:before {
content:"";
display:block;
opacity: 0;
position: absolute;
margin: 0;
top:0;
right:0;
left:0;
bottom:0;
background-color: rgba(0, 160, 227, 0.88);
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}
.work-home h4 {
display: block;
padding: 0;
margin:0;
font-family: helvetica, sans-serif;
font-size: 4em;
color: #ffffff;
position:absolute;
top:50%;
margin-top:-.8em;
text-align:center;
width:100%;
z-index:1;
opacity:0;
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}
I'm trying to get the words "I'm available!" to slide out, from the left, of the little "+" image, when I hover my mouse over it. What I've found on Google just isn't helping.
Before -
What I want it to do on hover
I would also like to make that little "+" sign turn sideways when hovered over as well, but I think I have an idea on how to do that myself. Wouldn't mind the help though :)
If I could do all of these things with just CSS/HTML, that would be great. I know some jQuery, but I try to avoid it because CSS is just cleaner.
If you want it to rotate without using jquery just use the css3 animation properties:
This will make your plus icon rotate 360 deg when hovered
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes rotate {
from
{
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0deg);
}
}
.plusicon:hover
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
You should also be able to use -webkit-transition-duration: 1s; to move your text out
So you want some sort of tooltip.
The html:
<a href="#">
<span>I'm available!</span>
</a>
The css:
a {
background: url(../path_to_image.png) 0 0 no-repeat; /*you allready have that part */
position: relative;
}
a span {
display: none;
position: absolute;
left: -10px;
top: 3px;
}
a:hover span {
display: block;
}
You can replace the <a> tag whit whatever you have there
HTML:
<div class="slidebtn">
<div class="icon">
<div class="text"><p>I'm Aviable</p></div>
</div>
</div>
CSS:
.slidebtn{
width:140px;
margin:auto;
overflow:hidden;
height:auto;
position:relative;
}
.text{
position:absolute;
width:100px;
float:Left;
margin-left:150px;
}
.icon{
background-image:url('http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_01.png');
width:24px;
height:24px;
float:right;
background-repeat: no-repeat;
background-position: right;
}
.icon:hover{
width:130px;
}
.icon:hover .text{
margin-left:0px;
}
DEMO
if you want use CSS3 transition change style like these
.text{
position:absolute;
width:100px;
float:Left;
margin-left:150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index:-1;
}
.icon{
background-image:url('http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_01.png');
width:24px;
height:24px;
float:right;
background-repeat: no-repeat;
background-position: right;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
DEMO 2