how can i get a css transition example like in here (the dropdown example), so far I've managed to only change the text and background color, but not the whole transition effect thing (where the rectangle rolls when hovered and rolls back smoothly when un-hovered), any idea how can i achieve it? here's my code:
a.menulink
{
text-decoration: none;
color: #000000;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1;
}
a.menulink:hover
{
text-decoration: none;
color: #FFFFFF;
background-color: rgb(255,24,24);
-webkit-transition: color .25s linear, background-color .15s linear .1s;
transition: color .25s linear, background-color .15s linear .1s;
}
thank you before
See this Demo
<a href="#" class="linkhover">
<span hover-title="LINK HOVER">LINK HOVER</span>
</a>
.linkhover {
display: inline-block;
overflow: hidden;
perspective: 400px;
-webkit-perspective: 400px;
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
}
.linkhover span {
display: block;
position: relative;
transition: all 500ms ease;
-webkit-transition: all 500ms ease;
transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.linkhover:hover span {
transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
-webkit-transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
}
.linkhover span:after {
content: attr(hover-title);
display: block;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
color: white;
background: red;
transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
-webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}
Just use this. No need use transition in ":hover" selector.
a.menulink{
text-decoration: none;
color: #000000;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1s;
}
a.menulink:hover
{
text-decoration: none;
color: #FFFFFF;
background-color: rgb(255,24,24);}
Related
I trying to change the brightess of a div (not only an image brightness). Generaly there is an image in a div, description and caption, the main div background color is white. I want to show ovarlay div onmouse hover. Idea is to cover main div with overlay div. But now I getting only the image brightness change , what I want to achieve is to cover the hole div and keep whithe fonts.
When I add a thumbnail brightness effect it also influence the fonts to became darker. how to do that keeping fonts white.
col-sm-6, caption, thumbnail classes are defined by bootstrap.
The code of:
<div class="hovereffect thumbnail Staffinview1 delay1s">
<img src="./images/photo.jpg">
<div class="overlay">
<?php echo Person_description; ?>
</div>
<div class="caption">
<h3>Name Surname</h3>
</div>
</div>
</div>
The css code:
.thumbnail:hover {
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.5);
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
-ms-transform: scale(0,1);
transform: scale(0,1);
color: #fff;
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img{
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /> </feComponentTransfer></filter></svg>#filter');
filter: brightness(0.3);
-webkit-filter: brightness(0.3);
}
I believe You are trying to achieve a mask
You can use z-index property and postion:absolute for that overlay div
css rule
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
z-index: 0;
transition: all 0.5s;
}
.overlay:hover {
z-index: 1;
background: rgb(173, 173, 173);
opacity: 0.5;
}
Snippet below
.thumbnail:hover {
transition: all 0.5s ease - in -out;
- moz - transition: all 0.5s ease - in -out;
- webkit - transition: all 0.5s ease - in -out;
- o - transition: all 0.5s ease - in -out;
- ms - transition: all 0.5s ease - in -out;
box - shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.5);
}
.hovereffect {
width: 100 %;
height: 100 %;
float: left;
overflow: hidden;
position: relative;
text - align: center;
cursor: default;
}
.hovereffect.overlay {
position: absolute;
overflow: hidden;
width: 80 %;
height: 80 %;
left: 10 %;
top: 10 %;
border - bottom: 1px solid# FFF;
border - top: 1px solid# FFF;
- webkit - transition: opacity 0.35s, -webkit - transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
- webkit - transform: scale(0, 1);
- ms - transform: scale(0, 1);
transform: scale(0, 1);
color: #fff;
}
.hovereffect:hover.overlay {
opacity: 1;
filter: alpha(opacity=100);
- webkit - transform: scale(1);
- ms - transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
- webkit - transition: all 0.35s;
transition: all 0.35s;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
z-index: 0;
transition: all 0.5s;
}
.overlay:hover {
z-index: 1;
background: rgb(173, 173, 173);
opacity: 0.5;
}
<div class="hovereffect thumbnail Staffinview1 delay1s">
<img src="./images/photo.jpg">
<div class="overlay">
<?php echo Person_description; ?>
</div>
<div class="caption">
<h3>Name Surname</h3>
</div>
</div>
Can someone help me understand how, using CSS, I can rotate and change an image at the same time on hover? When a user hovers over an image I want to start the rotation and change the image during the middle of the rotation. So far I have the following but I can not figure out how to delay the image change on hover.
.image-swap {
background: url("image1.jpg") no-repeat;
border-radius: 50%;
height: 300px;
width: 300px;
-moz-transition: -moz-transform 0.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s ease-in-out;
-o-transition: -o-transform 0.8s ease-in-out;
-ms-transition: -ms-transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out;
}
.image-swap:hover {
background: url("image2.jpg") no-repeat;
cursor: pointer;
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
You really just need to add background-image to the transition rule.
In this example, I also use a container element to trigger the hover (otherwise the interactive area rotates with the image, which causes jerkiness if the cursor gets caught on, say, a moving corner).
.image-swap-container {
width: 300px;
height: 300px;
overflow: hidden;
}
.image-swap {
background-repeat: no-repeat;
background-image: url("http://placehold.it/300x300/ff0000");
border-radius: 50%;
height: 300px;
width: 300px;
transform: none;
transition: transform 1s, background-image 1s;
}
.image-swap-container:hover {
cursor: pointer;
}
.image-swap-container:hover .image-swap {
background: url("http://placehold.it/300x300/00ff00");
transform: rotateZ(360deg);
}
<div class="image-swap-container"><div class="image-swap"></div></div>
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/
Please, how can I get an effect like the one in the upper right menu, with just CSS3? (mouse over -> circle shrinks and fades in, mouse out -> circle expands and fades out)
http://wpkuzen.com/html/architex/
I tried to look at the code and it's messy, nand couldn' find a tutorial that explain this...
Thanks in advance!
Take a look at this article and demo. They have very similar transitions/animations to the one which you need.
Here's an example:
FIDDLE
Markup:
CSS
.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: green;
box-shadow: 0 0 0 4px #FFF;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hi-icon:before {
content: "X"; /* place image here */
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon:hover:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
.hi-icon:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
left: -2px;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2px;
z-index: -1;
background: #FFF;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}
This effect is done by using the CSS transition. You have one property and instead of change that property instantly (on hover or fadeout) you change that property over time.
Here you have a nice link helping you to hopefully achive your goals. :)
link to transition
I really don't understand your comment "I tried to look at the code and it's messy".
You have a fully indented CSS with comments !
directly copy-pasted from your link:
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
border-radius: 50%;
font-size: 2.2em;
box-shadow: 0 0 0 30px transparent;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
width:1.1em !important;
}
/* Animate the box-shadow to create the effect */
.navbar .nav a:hover i,
.navbar .nav a:active i,
.navbar .nav a:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}
OK, I have a big problem here..
I am creating a new website with CSS3 effects http://sauldesign.com/vtdk/ . When I wrote a css code for main title 3D effect (Roll), other website parts have broken - backgrounds of #index3 and #index4 disappeared and all colors of background images changed to little lighter and brighter.
When you scroll to #index3 part you see black background (there should be an image). You can see the real background image appear when #index3 is almost scrolled out of the view to the top (bg image appears when #index3 bottom is about 100px from top).
When I delete all css3 transition and transform code, everything works fine. Here is css3 code:
/* CSS3 ROLL LINKS */
.main-title {
display: inline-block;
vertical-align: top;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-perspective: 300px;
-moz-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.main-title:hover {
background: none;
text-shadow: none;
-webkit-transition: all 600ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform: scale(0.85,0.85);
-moz-transform: scale(0.85,0.85);
-ms-transform: scale(0.85,0.85);
transform: scale(0.85,0.85);
}
.main-title span {
display: block;
position: relative;
padding: 10px 30px;
pointer-events: none;
background-color: #fff;
-webkit-transition: all 600ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.main-title:hover span {
background: #fff;
-webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
}
.main-title span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 10px 30px;
white-space: nowrap;
color: #2366ac;
background: #fff;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
-ms-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}