I have trouble vertically centering icon that drops on image hover, and I am trying to ease out its drop down. Currently it is coming down too aggressive but no matter what transition property I set (ease, ease-out etc.) it doesn't change.
https://jsfiddle.net/4br7sj0q/2/
<div class="fader">
<a href="#">
<img width="200" height="350" src="http://placehold.it/200x350">
<span class="fa fa-search fa-3x"></span>
</a>
</div>
.fader {
position: relative;
span.fa {
position: absolute;
top: -9999px;
// center horizontal
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
transition: all 0.3s ease-out;
}
&:hover .fa {
top: 50%;
}
}
Couple of things.
The icon is coming a long way. You really don't need to send it 9999px away, just enough to be offscreen (or apply overflow hidden to the parent and then it can just be 1em off the top).
Then change the transition to something like transition: all 0.5s ease;...if it's too fast, make the time longer.
The easing function should just be ease...not ease-out...it looks more natural.
Finally, to adjust the centering you need to drag it back up half it's own height
transform:translateY(-50%);
li {
list-style: none;
text-align: center;
}
.fader {
position: relative;
overflow: hidden;
display: inline-block;
}
.fader img {
-webkit-transition: all 0.3s;
transition: all 0.3s;
display: block;
}
.fader img:hover {
opacity: 0.5;
}
.fader span.fa {
color: #333;
position: absolute;
top: -1em;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.fader:hover .fa {
top: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<li>
<div class="fader">
<a href="#">
<img width="200" height="350" src="http://placehold.it/200x350"> <span class="fa fa-search fa-3x"></span>
</a>
</div>
</li>
Your top value is insanely high ;)
Just change it to a more reasonnable value to hide it and it should be good for you :
span.fa {
color: #333;
position: absolute;
top: -60px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
transition: all 0.3s ease-out;
}
Fiddle
Related
I saw many apps that can do this: When you click a menu expand icon. The whole content moves to the right or left. making some room for the menu.
Is it possible to shift the whole existing page to the right or left out of the screen, making room for the menu? If so, how can I achieve it with CSS or JavaScript?
JS Below
$(document).ready(function() {
$('.menu-switch').draggable({containment: "parent"});
$('.menu-switch').click(function(){
$('.content').toggleClass('show-menu');
});
$('.left-menu span').click(function(){
$('.content').toggleClass('show-menu');
});
})
CSS Below
.content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 0.3s linear;
transition: -webkit-transform 0.3s linear;
transition: transform 0.3s linear;
transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
.content.show-menu {
-webkit-transform: translateX(200px);
transform: translateX(200px);
-webkit-transition: -webkit-transform 0.3s linear;
transition: -webkit-transform 0.3s linear;
transition: transform 0.3s linear;
transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
.content .inner-content {
position: relative;
top: 50%;
left: 50%;
width: 60%;
padding: 20px 30px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.content .menu-switch {
position: absolute;
z-index: 1;
left: 2%;
top: 2%;
padding: 10px 13px;
background:#999;
border-radius: 50%;
}
.content .left-menu {
text-align: center;
position: absolute;
box-sizing: border-box;
left: -200px;
width: 200px;
height: 100%;
}
.content .left-menu span {
position: absolute;
left: 2%;
top: 2%;
}
.content .left-menu .left-menu-content a {
display: block;
}
HTML Below
<div class="content">
<aside class="left-menu">
<span class="fa fa-times-circle fa-lg fa-fw fa-inverse"></span>
<div class="left-menu-header">
<h3>My Menu<h3>
<hr />
</div>
<div class="left-menu-content">
Menut Item 1
</div>
</aside>
<nav class="menu-switch">
<span class="fa fa-navicon fa-2x fa-inverse f-fw"></span>
</nav>
<div class="inner-content">
<p>Page Content Would be over here</p>
</div
</div>
You can solve the problem with an CSS animation that overlays the whole screen.
Have a look at the 9th example from Eduard L. in the link below you can pretty much do the same thing you only need to adjust the navbar how you like it and make the animation way bigger.
https://freefrontend.com/css-sidebar-menus/
im trying to put a div above a imagem, this div is a white box, and inside this div there are a title and a paragraph element, but im struggling to make the white box appear, the text appear, but the white box doesn't appear at all.
Here is the code of the section im trying to do this, the div has a name of "info-container". I could put the text over the image, but the white box is not appearing, can you help me?
HTML:
<div class="row">
<h1>SEE YOUR TOP ARTISTS</h1>
</div>
<ul class="artists-showcase Clearfix">
<li>
<figure class="artist-photo">
<img src="img/logic.jpg" alt="Logic">
<div class="info-container">
<h4>LOGIC</h4>
<p>Twitter-API</p>
</div>
</figure>
</li>
<li>
<figure class="artist-photo">
<img src="img/avicci.jpg" alt="Avicci">
<div class="info-container">
<h4>LOGIC</h4>
<p>Twitter-API</p>
</div>
</figure>
</li>
<li>
<figure class="artist-photo">
<img src="img/ed_sheeran.jpg" alt="Ed Sheeran">
<div class="info-container">
<h4>LOGIC</h4>
<p>Twitter-API</p>
</div>
</figure>
</li>
<li>
<figure class="artist-photo">
<img src="img/eminem.jpg" alt="Eminem">
<div class="info-container">
<h4>LOGIC</h4>
<p>Twitter-API</p>
</div>
</figure>
</li>
</ul>
CSS:
.section-artists {
padding: 0;
}
.artists-showcase {
list-style: none;
display: inline-block; /* Alinhamento centro */
width: 110%; /* Alinhamento centro */
margin-left: -5%; /* Alinhamento centro e full width */
height: 100%;
margin-top: 5%;
}
.artists-showcase li {
display: block;
transform: skewX(-10deg);
float: left;
width: 25%;
height: 100%;
}
.artist-photo {
width: 100%;
height: 100%;
margin:0;
overflow: hidden;
background-color: #000;
}
.artist-photo img {
opacity: 0.7;
width: 150%;
height: auto;
-webkit-transform: scale(1.18) skewX(10deg); /* reverte o skew para a imagem ficar reta */
transform: skewX(10deg);
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;
transition: transform 0.5s, opacity 0.5s, filter 0.5s;
transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;
transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;
}
//*.artist-photo img:hover {
// opacity: 1;
// -webkit-transform: scale(1.03) skewX(10deg);;
// transform: scale(1.03) skewX(10deg);
// filter: hue-rotate(250deg);
/*/
/* Container com texto e titulo */
.info-container {
background: #fff;
width: 500px;
height: auto;
top: 50%;
padding: 0;
margin-bottom: -20%;
z-index: 1000;
}
.info-container>h4 {
float: left;
position: absolute;
top: 50%;
left: 10%;
z-index: 1000;
}
.info-container>p {
float: left;
position: absolute;
top: 55%;
left: 10%;
z-index: 1000;
}
Thank you very much in advance!
ok So here is my try,
first add overflow to the info-container and add position absolute to it and use margins h4 and p for alignment.
.artist-photo {
position: relative
}
.info-container {
position:absolute;
top: //As per need;
overflow: hidden;
}
Remove position absolute from h4 and p use margins to align it
.info-container>h4 {
float: left;
margin-right: 10px;
}
.info-container>p {
float: left;
}
In my scenario, i have try many combinations, but i'm not able to figure out why the transition not work on mouse out. Hope in your helps... Thanks!
CSS:
.wrap_img {
position: relative;
width: 300px;
height: 200px;
background: #555;
}
.play-icon-hover {
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.play-icon-hover i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
color: #fff;
opacity: 0.7;
font-size: 90px;
}
.wrap_img:hover .play-icon-hover {
visibility: visible;
opacity: 1;
cursor: pointer;
z-index: 1;
}
HTML:
<div class="wrap_img">
<a href="" title="">
<div class="play-icon-hover">
<i class="fa fa-play-circle"></i>
</div>
</a>
</div>
DEMO: https://jsfiddle.net/L41kgye3/10/
The reason your transition is not working on mouseout is that you have used opacity 0.5s ease-in-out in your css whereas you have also used visibility: hidden on your css selector .play-icon-hover. So you need to use transition: all 0.5s ease-in-out. Try this code.
.play-icon-hover {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s ease-in-out;
}
Change to this:
transition: all 0.5s ease-in-out;
HTML:
<div class="mySlides">
<img src="1.jpg">
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
</div>
CSS:
.mySlides {
padding-top: 25%;
padding-left: 5%;
}
.mySlides img {
object-fit: cover;
position: absolute;
max-width: 35%;
}
.mySlides img:nth-of-type(1) {
left: 0%;
top: 0%;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
This will be repeated for all images, i.e. nth-of-type(2,3,4,5)
.mySlides img {
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
padding: 10px 10px 30px 10px;
background: linear-gradient(#ffffff, #eaeaea);
border: solid 1px black;
}
I wanted to stack the images on top of each other and have them all centered on the screen.
On hovering I wanted the images to separate horizontally while still maintaining the animation.
Check this out
Working fiddler https://jsfiddle.net/RaajNadar/L0ennqwp/
Html
<div class="mySlides">
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/400/200/sports"/>
</div>
css
.mySlides {
position: relative;
}
.mySlides img {
position: absolute;
top: 0;
left: 0;
max-width: 300px;
transition: left 1.2s ease-in-out;
}
.mySlides:hover img:last-child {
left: 300px;
}
Also got a nice animation.
Is this what you need?
.mySlides {
display: flex;
position: relative;
}
.mySlides img {
position: absolute;
top: 0;
left: 0;
}
.mySlides:hover img {
position: relative;
top: auto;
left: auto;
}
<div class="mySlides">
<img src="http://placehold.it/300x150/000000">
<img src="http://placehold.it/300x150/003300" />
<img src="http://placehold.it/300x150/00ff00" />
<img src="http://placehold.it/300x150/006600" />
<img src="http://placehold.it/300x150/ff0000" />
</div>
I made this rollover:
jsfiddle.net/DH6Lu/
But as you can see the background image glitches. This is not the case when I don't use the opacity on the main div:
http://jsfiddle.net/6KT9p/
Any idea what is wrong?
<div id="opacity">
<div class="box">
<a class="link" href="#">
<div class="inner">
<img src="http://lorempixel.com/340/192/" width="340" height="192">
<div class="description">
<h3>titel2</h3>
</div>
</div>
</a>
</div>
</div>
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.inner img {
position: absolute;
opacity: 1;
-webkit-transition: opacity 0.5s ease;
}
.inner img:hover {
opacity: 0.15
}
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0 fixed;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
.description h3 {
color: #fff;
font-size: 18px;
text-transform: uppercase;
text-align: center;
position: absolute;
}
#opacity {
opacity: 0.5
}
The problem arises from the fixed property of the background.
Set the CSS to
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
and it will work
fiddle
The problem is also linked to the GPU handling this different from the CPU. The GPU is handling the background during the transtion, the CPU in the static states. If you set transform: translateZ(1px) - one of the usual tricks to enable GPU - the background will be permanently in an offset. It solves the glitch, but the look isn't correct.
I guess it glitches because .inner inherits the opacity from #opacity... but I don't know why. Interesting.
Still, I have a workaround for your case, if you want to keep the initial alpha to 0.5: make the .inner half visible, hide the .description unless it's hovered.
The adjacent sibling selector + is useful to show the description when the image is hovered.
Here's what you have to add (existent properties omitted):
.inner img {
-webkit-transition: opacity 0.5s ease;
opacity:0.5;
}
.inner img:hover{
opacity:0.15;
}
.inner img:hover + .description{
opacity:1;
}
.description {
-webkit-transition: opacity 0.5s ease;
opacity:0;
}
Here's a working demo for this.