I have a bunch of pictures as links on one site, like this:
<IMG SRC="img/contact2.png" class="mobile" border="0" alt="Contact">
Later on, I position and size them correctly with CSS, and added a hover effect:
.mobile{
position: absolute;
left: 69%;
top: -12%;
width: 19%;
height: auto;
transition: linear;
transition-duration: 0.5s;
z-index: 993; }
.mobile {
position:absolute;
top: -11%;
left: 68%;
width:23%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
So far, so good, works as intended, but what if, instead of simply resizing it and slightly changing it's position, I want it to display a different image on mouseover?
I tried doing it like this:
with this CSS
.mobile
{
position: absolute;
display: block;
background-image: url("img/contact2.png") center top no-repeat;
width: 23.2%;
height: auto;
left: 10%;
top: 0%;
transition: linear;
transition-duration: 0.5s;
z-index: 992; }
.mobile:hover {
position:absolute;
background-image: url('img/contact3.png');
top: -3%;
left: 11%;
width:26%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
But that just results in the image disappearing altogether. What am I doing wrong? I think it has something to do with the use of % for size, especially the "height: auto", but because of the context of the rest of the site, I can't replace that.
If you need any more info, just let me know, I didn't wanna spam you guys with more than necessary.
Below I will once copy-paste the entire code, since I realize that with the minimal info I gave last time, my problems couldn't really be answered. Maybe with this, someone can copy it and see what I mean:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=800" />
<title>Mainsite</title>
</head>
<body style="padding:0px; margin:0px; overflow: scroll;" >
<body background="http://i.imgur.com/YAxp4xz.jpg">
<style>
html,body { height:100%; }
</style>
<div class="text">
<style>
#font-face {
font-family: 'gt-walsheim';
src: url('web/gt-walsheim.ttf');
}
</style>
<style type="text/css">
.prozent {line-height: 150%;
font-family: "gt-walsheim";
}
</style>
<br>
<p class="prozent" align="center">
<font size="+3.5"><b><font color="#804040">RESTAURANT-NAME</font></b> </font>
<br>
<br>
<font size="+2"><font color="#804040">Blablablablablabla Über uns balbalba ablab balbal Willkommen ablabla blabal
<br>
<br>
<br>
<br>
<br>
</div>
<!-- Ende dv class="text" -->
<div class='box'>
<div class='content'>
<div class="tisch">
<IMG SRC="http://i.imgur.com/QebCkyE.png" class="menu" border="0" alt="Zur Speisekarte">
<IMG SRC="http://i.imgur.com/qoHQ9Bd.gif" class="teller" border="0" alt="">
<IMG SRC="http://i.imgur.com/WNR18gb.png" class="handy" border="0" alt="Kontakt">
<IMG SRC="http://i.imgur.com/I4GTdXr.png" class="pad" border="0" width="47%" alt="Öffnungszeiten">
</div>
<!-- Ende tisch -->
</div>
</div>
<style>
.text {
position: relative;
width: 100%;
z-index: 990; }
.box{
position: relative;
width: 100%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 35%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.tisch
{
position: relative;
height: 70%;
<!-- x% höhe von alles -->
width: 100%;
z-index: 991; }
.menu
{
position: absolute;
width: 23.2%;
height: auto;
left: 10%;
top: 0%;
transition: linear;
transition-duration: 0.5s;
z-index: 992; }
.menu:hover {
position:absolute;
top: -3%;
left: 11%;
width:26%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
.teller
{
position: absolute;
width: 35%;
height: auto;
left: 30%;
top: 0%;
z-index: 992; }
.handy
{
position: absolute;
left: 69%;
top: -17%;
width: 19%;
height: auto;
transition: linear;
transition-duration: 0.5s;
z-index: 993; }
.handy:hover {
position:absolute;
top: -15%;
left: 68%;
width:23%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
.pad
{
position: absolute;
left: 78%;
top: 48%;
width: 12%;
height: auto;
transition: linear;
transition-duration: 0.5s;
z-index: 993; }
.pad:hover {
position:absolute;
top: 43%;
left: 76%;
width:14%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;}
</style>
Those are of course all placeholder graphics, but that's not important-
What I want it to be able to not only transition in size and position, but to an entirely different image as well.
You may notice that everything is defined with %, and works just fine. This (and all those divs) are necessary as a setup, so no matter how I resize the window, the pictures not only stay proportional to it, but also in position to each other.
Not quite sure while changing that the picture source is defined in the stylesheet, instead of in the link itself, causes problems and makes my pictures disappear.
This definition doesn't work for 2 reasons. First, a block level element is only as tall as the contents inside. Without contents inside, it is 0 height. So this element doesn't appear on the page because it is 0 height. Second issue is you're using background-image wrong. What you meant to do there is use background, the short-hand property, since you're including center top no-repeat.
.mobile
{
position: absolute;
display: block;
background-image: url("img/contact2.png") center top no-repeat;
width: 23.2%;
height: auto;
left: 10%;
top: 0%;
transition: linear;
transition-duration: 0.5s;
z-index: 992; }
Besides the issues I just mentioned, this definition doesn't work because you misspelled "mobile"
.moblile:hover {
position:absolute;
background-image: url('img/contact3.png');
top: -3%;
left: 11%;
width:26%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
If you address those issues, it works.
html,body {height:100%;}
.mobile {
position: absolute;
display: block;
background: url("http://www.w3schools.com/css/img_fjords.jpg") center top no-repeat;
width: 23.2%;
height: 100%;
left: 10%;
top: 0%;
transition: linear;
transition-duration: 0.5s;
z-index: 992;
}
.mobile:hover {
position: absolute;
background-image: url('https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg');
top: -3%;
left: 11%;
width: 26%;
display: block;
transition: linear;
transition-duration: 0.5s;
z-index: 999;
}
Related
I want to make a pop-up footer from elements that appeared when the user hover on a small part of it using only CSS. I run the code on jsfiddle and it's working.
Unfortunately, when I run it from localhost on google version 88.0.4 (using visual studio code), I can clearly see that the element properties didn't load on time. they are generating too slow. The transition is indeed working, the problem only happened just after the refresh/the page loaded.
This is the code:
https://jsfiddle.net/hzvgcw58/4/
And this is the video:
https://youtu.be/hiNX-e9uHWA
the problem occurred at 00:02 to 00:06, when I refresh the page
How to fix this?
.tab-container {
position: relative;
height: 200px;
width: 870px;
margin: auto;
overflow: hidden;
background-color: rgba(255, 247, 234, 0.95);
}
.tab {
position: relative;
bottom: -153px;
height: 47px;
width: 182px;
z-index: 9;
border-radius: 15px 15px 0px 0px;
background-color: none;
opacity: 0.5;
transition: 2s ease-in-out;
}
.tab::after {
width: 870px;
height: 113px;
background-color: none;
position: absolute;
bottom: -112px;
left: 0px;
content: '';
z-index: 3;
}
.a {
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
width: 150px;
height: 19px;
background-color: rgba(54, 52, 49, 1);
border-radius: 15px 15px 0px 0px;
padding: 14px 16px;
font-size: 17px;
transition: 2s ease-in-out;
}
.b {
background-color: rgba(54, 52, 49, 1);
position: absolute;
bottom: -113px;
z-index: 3;
padding: 6px 0px;
height: 101px;
width: 870px;
transition: 2s ease-in-out;
}
/* Change background color of buttons on hover */
.tab:hover {
bottom: -40px;
transition: 2s ease-in-out;
}
.tab:hover + .a {
cursor: pointer;
transition: 2s ease-in-out;
bottom: 112px;
display: block;
}
.tab:hover ~ .b {
cursor: pointer;
transition: 2s ease-in-out;
display: block;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="footer-container">
<div class="footer">
<div class="tab-container">
<div class="tab">
</div>
<div class="a">
London
</div>
<div class="b">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Edit:
Thanks to #rauberdaniel the code has finally been fixed. i deleted some of unnecessary attributes such as transition: 2s ease-in-out; & display: block; in .tab:hover + .a { and changed a few codes in html
Change your transition attributes to include only the value you want to transition (in this case bottom), so for example:
.tab:hover {
transition: bottom 2s ease-in-out;
}
Be aware though that transitioning positional values like top or bottom is generally a bad idea because it will trigger a lot of expensive layout tasks for the browser. Instead, you should use transform: translate(…) in order to move the footer up.
I need to do a task where I have an image, this image is being covered in some color fade, and when I hover on image - fade dissapears (the example is https://html5up.net/uploads/demos/forty/ ). I did it, but I also have to do a transition so that disappearing of fade will be slower for 2 seconds. I tried to put transition property everywhere and I failed. Any help, please?
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
Instead of this block of code :
.photo-text.one:hover:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
You can simplify by simply hiding the overlay by modifying its opacity to 0 with the transition of opacity and the duration you need:
.photo-text.one:hover > .img-overlay{
transition: opacity 1.5s ease-in-out;
opacity: 0;
}
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
transition: opacity 1s ease-in-out;
}
.photo-text.one:hover > .img-overlay{
transition: opacity 1.5s ease-in-out;
opacity: 0;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
You could just hover over the .img-overlay, but since you also want to have the same effect when hovering over the text, leave it as it is and just replace the :after pseudo-element (don't need it) with the > .img-overlay, set its opacity to 0 and apply the transition property as desired:
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
max-width: 100%; /* responsiveness */
}
.img-overlay {
position: absolute; /* needs to be on the child since the relative position is on the parent */
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
transition: opacity 2s linear; /* optional / when "unhovering" */
}
/* added */
.photo-text.one:hover > .img-overlay {
opacity: 0;
transition: opacity 2s linear; /* can also try other values such as "ease", "ease-out" etc. */
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
I wrote some code to create a layover with some text. Now I have two problems:
1) I want to center the text.
2) I want to make the layover to be a link.
As I am a CSS newbie, I hope you can give me any advice!
Best regards!
.hover_div {
position:relative;
width:200px;
height:200px;
}
.hover_div img {
width:100%;
vertical-align:top;
}
.hover_div:after {
content: "";
position: absolute;
width:100%; height: 100%;
top: 0; left: 0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.hover_div:before {
content: attr(data-content);
color:#fff;
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
z-index: 1;
}
.hover_div:hover:after {
opacity:1;
}
.hover_div:hover:before {
opacity:1;
}
<div data-content="Elektro" class="hover_div">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
I've updated your code in the following JSFiddle: https://jsfiddle.net/rvxo7fn5/
I've added the following lines to the :before:
text-align:center;
width: 100%;
margin-top:50%;
transform: translateY(-50%);
Basically, text-align: center; of course centers the text horizontally. However, an absolute positioned div has no width, which is why I added the width: 100%. Next you need to center it vertically. The margin-top: 50%; moves the div 50% of the height of the parent div. transform: translateY(-50%) moves the div back 50% of the height of the div itself. This aligns it in the center of the parent. (50% of parent height - 50% height of child div).
You also mentioned wanting it to be a link. This can be achieved by simply replacing the <div> with a <a> and adding display: block; to your .hover_div class. This gives it the properties a div would also have.
Hope that helps!
Update the :hover style as below.
.hover_div:hover:before
{
opacity:1;
width:100%;
text-align:center;
text-decoration:underline;
cursor:pointer;
}
You can make it link by replacing <div> with <a>.
.hover_div {
position:relative;
display: block;
width:200px;
height:200px;
}
.hover_div img {
width:100%;
vertical-align:top;
}
.hover_div:after {
content: "";
position: absolute;
width:100%; height: 100%;
top: 0; left: 0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.hover_div:before {
content: attr(data-content);
color:#fff;
position:absolute;
text-align: center;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
transform: translateY(-50%);
z-index: 1;
width: 100%;
left: 0;
top: 50%;
}
.hover_div:hover:after {
opacity:1;
}
.hover_div:hover:before {
opacity:1;
}
<a href="#" data-content="Elektro" class="hover_div">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</a>
The text can be centered by adding left: 50%; top: 50%; transform: translate(-50%, -50%).
Pseudo elements like :after and :before cannot be accessed from the DOM. So a link can't be made out of it.
.hover_div {
position: relative;
width: 200px;
height: 200px;
}
.hover_div img {
width: 100%;
vertical-align: top;
}
.hover_div:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.hover_div:before {
content: attr(data-content);
color: #fff;
position: absolute;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.hover_div:hover:after {
opacity: 1;
}
.hover_div:hover:before {
opacity: 1;
}
<div data-content="Elektro" class="hover_div">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
.hover_div {
position:relative;
width:200px;
height:200px;
}
.hover_div img {
width:100%;
vertical-align:top;
}
.hover_div:after {
content: "";
position: absolute;
width:100%; height: 100%;
top: 0; left: 0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.hover_div:before {
content: attr(data-content);
color:#fff;
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
z-index: 1;
text-align:center;
height:100%;
width:100%;
padding-top:50%;
}
.hover_div:hover:after {
opacity:1;
}
.hover_div:hover:before {
opacity:1;
}
<div data-content="Elektro" class="hover_div">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
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
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.