The solution is probably really simple but ahhh I just can't get it. I have a div with text in it which I placed right at the same location of an image. What is supposed to happen, and it does, is the image is supposed to fade out allowing the text to be more visible. The only thing is though, that I want the text to be hidden, and made visible only when the user hovers over the image/div text box. I tried a few things like
.display {
visibility: hidden;
}
img.artwork:hover + .display {
visibility: visible;
}
but that doesn't work because it just starts glitching. I can't use z-index either because neither the image nor the div text are in position: absolute or position: relative. Any ideas on how to fix this? This is what I have right now:
img.albumartwork:hover{
opacity: .15;
-webkit-transition: all 0.4s ease 0s;
}
.display {
font-size: 12px;
font-weight: bold;
width: 120px;
height: 120px;
color: rgb(220,221,229);
text-align: center;
margin-top: -120px;
margin-left: 52.5px;
background-color: rgba(0,0,0,0.6);
}
try to target color property on your :hover
SAMPLE
div {
color: transparent;
transition: 0.5s all ease ;
}
div:hover {
color: black;
}
div:hover img {
opacity: 0;
}
img {
width: 150px;
transition: 0.5s all ease ;
position: absolute;
left: 0;
}
Related
This is my code:
<!DOCTYPE html>
<style>
a.nice-link {
position: relative;
color: #71ad37;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 200%;
height: 20%;
width: 0;
max-width: 200%;
-moz-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
li {
display: inline-block;
}
.try{
width: 50px;
}
</style>
<div class = "try"><a class="nice-link" href=“http://katoliiklased.blogspot.com/2018/08/katekismuse-surmanuhtlust-kasitlev-uus.html“ data-text="Hello Bello Sello" target="_blank">Hello Bello Sello</a>
</div>
The point of the code is: if you hover your mouse over the link, it will put transition into work, so that the text will highlight from left to right.
It works OK if there is one line of text. But if there is more, the transition works only on the first line.
How to make it work on other lines also? Either so that 1) the transition begins with the first line and then continues for other lines or 2) the text will transition as whole, with all the lines at the same time from left to right
I appreciate your help!
Just remove the white-space: nowrap; in a.nice-link:after style.
Test it here.. https://jsfiddle.net/nimittshah/aqd6ev39/1/
Thanks for all the help, solution below.
I am new to web development, and I am trying to rebuild a website to practice my CSS.
The website in questions is http://www.divecarib.com. If you scroll down to the pictures on that home page, you notice that they "fade" on hover. How do I achieve that fade? Using opacity makes the background image come through, which is not how it's implemented on that website.
Thank you for the help!
Below is my fade attempt...did not include the code in original post because I thought it was irrelevant given that I was on the wrong path.
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.7;
}
---Solution (at least how I did it - taken from http://jsbin.com/igahay/1/edit?html,output)-----
<div class=picSet>
<figure class="tint">
<p id="#p1">Student in training</p>
<p id="#p2" style="position: absolute;top: 36px; color: white;">SKAT crew doing open water training</p>
<img id=pic1 src="Media/pic1.jpg" />
</figure>
</div>
.tint {
position: relative;
float: left;
margin: 3px;
cursor: pointer;
}
.tint:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.tint:hover:before {
content: "";
background: rgba(96,150,179, 0.54);
border: 5px solid #0B689A;
border-radius: 20px;
margin: 3px;
}
.tint p{
position:absolute;
top:20px;
left:20px;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 0.75em;
display: none;
color: #0B689A;
}
.tint:hover > p{
display: block;
}
You can't fade the opacity of an element, without having what's behind showing through.
The site you linked to isn't fading the opacity of the image, but introducing a translucent layer over the top with the text in.
If you just want to fade the image, but not have the background show through, you could put a wrapper around the image with a solid background colour. But there's no way to fade an image and not have what's behind show through.
.container {
background:#FFF;
}
.container img:hover {
opacity:0.8;
}
At the moment i am working on a header with a slider animation (css3 only):
http://jimmytenbrink.nl/slider/
Everything is working fine except sometimes the slider is bugging if you go from the center to the right. It seems that i need to stop the animation for a few miliseconds to complete. However i searched everywhere on the internet but i cant seem to get it to work.
Anyone here has experience with it who can help me out?
HTML
<header>
<div><span>slide 1</span></div>
<div><span>slide 2</span></div>
<div><span>slide 3</span></div>
<div><span>slide 4</span></div>
<div><span>slide 5</span></div>
<div><span>slide 6</span></div>
<div><span>slide 7</span></div>
<div><span>slide 8</span></div>
</header>
CSS
header {
margin-top: 10px;
width: 800px;
overflow: hidden;
height: 500px;
}
header div {
background-color: #000;
width: 43.8px;
height: 200px;
position: relative;
float: left;
-webkit-transition: width .3s;
transition: width .3s;
overflow: hidden;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
margin-right: 2px;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child {
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header div img {
position: relative;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -350px;
opacity: 0;
width: 450px;
font-family:'Fugaz One', cursive;
text-transform: uppercase;
font-size: 24px;
color: #fff;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header:hover > div {
width: 43.8px;
}
header:hover > div:hover {
width: 150px;
}
Here is a JSFiddle
So the question is, how can i set a stop on the animation for a few miliseconds so the animation can finish before it gets triggered again?
Hope my question is clear!
(thanks for the edit)
One might call my answer a workaround. Maybe it is but according to my comment on ExtPro's answer - it is still completely pure CSS.
I decided to use display: table-cell since the table cell's width is distributed equally.
So, the CSS might look like this:
HINT: This is only a bunch of necessary CSS. All the code is in the jsFiddle
header {
width: 368px;
display: table;
overflow: hidden;
}
header > div {
width: 44px;
height: 200px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
overflow: hidden;
}
header > div:hover {
width: 151px;
}
Fiddle
As you can see, we don't have to determine the width of all not-hovered divs. Actually, the problem came from that very CSS rule:
/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
width: 43.8px;
}
You were changing the width of the divs on header:hover, so when the transition didn't manage to do its job in time, you came out with mouse pointing to the header but to non of the divs.
If I understand what you mean by 'bugging', what is happening is if you move the mouse quickly to the right, it traverses the currently open div and is left in an area which when that div collapses, does not contain (e.g. the mouse is not hovered over) the next one in order to expand it- namely the hover event of the following div(s) is/are not firing thus they do not expand. There wont be a CSS fix for this Im afraid as its browser related, you may want to replace with jQuery/JS.
I am currently running into a problem when trying to implement a simple rollover using CSS :after and :hover pseudo-elements.
Have a look at the clock and facebook icons to the right: http://clean.philippchristoph.de/
Here's the CSS code:
.icon {
background: url('../img/clock_icon.png') top left no-repeat;
width: 25px;
height: 25px;
}
.icon:after {
.transition(opacity, .2s, ease);
content: " ";
position: absolute;
top: 4px; left: 5px; bottom: 0; right: 0;
background: url('../img/clock_icon.png') no-repeat;
background-position: -25px 0;
opacity: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
As you can see, the image is faded using a sprite and opacity. However, now I can't seem to hover both elements anymore. As you will see on the example page, you can hover over the facebook icon, but not over the clock. If you remove the facebook icon, you can hover over the clock again. Note that the two icons are entirely seperate elements.
I've tested this behavior on both FF and Chrome on Windows.
It'd be awesome if someone could shed some light onto this issue.. :)
Replace your CSS with this one (I mean the mentioned classes only, not your entire CSS :) ):
.icon {
background: url("../img/clock_icon.png") no-repeat scroll left top transparent;
height: 25px;
width: 25px;
position: relative
}
.icon:after {
-moz-transition: opacity 0.2s ease 0s;
background: url("../img/clock_icon.png") no-repeat scroll -25px 0pt transparent;
bottom: 0pt;
content: " ";
left: 0;
opacity: 0;
position: absolute;
right: 0pt;
top: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
.facebook, .facebook:after {
background-image: url("../img/facebook_icon.png");
}
.clock {
position: relative
}
.clock div {
-moz-transition: opacity 0.2s ease 0s;
color: #A0A0A0;
font-size: 12px;
left: 40px;
line-height: 11px;
opacity: 0;
position: absolute;
top: 5px;
width: 160px
}
You need to add position: relative to your icon class, so that the generated content is positioned relative to that, rather than the parent. I've tried to simplify what you have in a fiddle, though I wasn't 100% sure what you are after. Is that close? I also amended the positioning of the generated content.
It's worth noting that - annoyingly - you can't apply a transition to generated content (which is why any attempt to have the opacity transition on these elements will fail in your case). Hopefully this will change soon.
I have a sidebar navigation in standard <ul><li><a></a></li></ul> pattern which truncates the full text of the links using overflow hidden. After hovering for 1s, I want the the anchor to expand in width, showing the full text of the link.
I have this functionality working completely in CSS, but I'm running into anomaly:
I have the width of the anchor set to Auto on :hover. After the 1s delay is triggered, the width of anchor snaps to 0 and then expands out to its full width.
below is my css, and here you can see my current code in action: http://eventfeedstl.com/day/07182011/
.day .sidebar{
width: 200px;
}
.day .sidebar ul {
list-style: none;
padding: 0;
margin:0;
position: absolute;
width: auto;
}
.day .sidebar ul li{
border-bottom: 1px solid #626666;
display: relative;
width: 200px;
}
.day .sidebar ul li:hover{
width: auto;
}
.day .sidebar ul li a{
font-weight: normal;
font-size: .8em;
color: #f2f2f2;
display: block;
width: auto;
padding: 4px 5px;
background: none;
width: 190px;
height: 10px;
overflow: hidden;
position: relative;
z-index: 10;
-webkit-transition: background 1.3s ease-out;
-moz-transition: background 1.3s ease-out;
transition: background-color 1.3s ease-out;
}
.day .sidebar ul li a:hover {
background: #797979;
-webkit-transition: background 0.15s;
-moz-transition: background 0.15s;
transition: background 0.15s;
text-decoration: none;
width: auto;
-webkit-transition-property:width;
-webkit-transition-delay:1s;
position: relative;
}
You are overwriting your transitions between background and width, which is probably causing problems.
There is a way to set multiple transitions but I'm fairly sure this way will cause problems.
But
In general transitioning to auto doesnt work yet. I like to use min-width and max-width in these cases to approximate the effect.
A solution for toggling between a specific width and auto:
The only way to get width: auto; transitions to work reliably is to explicitly set the width of items using Javascript. I know this defeats the purpose of using CSS transitions, but here's how I got it to work:
$(".author").each(function() {
$(this).width( $(this).width() );
});
and then in css
.author:hover { width: 200px; !important }
EDIT: Here's a pure CSS solution for toggling between 0 and auto: CSS transition not working for percentage height?