I have a slideshow on my main homepage, and on the bottom of it, it's showing text.
I'd like the text, when hovered over, to change color to red, and to be able to be clicked, redirecting to a given link.
My code is as follows:
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 450px; overflow: hidden;">
<div data-p="218.75">
<img data-u="image" src="images/slides/slide1.jpg" />
<div style="position:absolute;top:370px;left:379px;width:500px;height:70px;z-index:0;font-family:Comic Sans MS;font-size:72px;color:#000000;line-height:70px;text-align:center;">Rationale</div>
</div>
Any help will be greatly appreciated!
You can basically wrap any HTML element in the <a> tag. It then becomes clickable, and you can style it accordingly.
Alternatively, you can use the following CSS to make an element look like a link:
#myElement:hover {
cursor:pointer;
}
You can then handle the on click with javascript. I hope that helps!
Related
I'm trying to make a general purpose hover overlay that visually indicates when a user mouses over something.
Just a note, I highly recommend running all the inline code snippets to make it easier to understand what I'm trying to achieve!
Original issue
The following snippet is what I started out with. It works for most of my use cases, but when there's a lone element, the overlay is too wide.
.buttonized-hover-overlay:hover {
opacity: 100 !important;
}
<h2>
this is how it was before. when i hover, the hovered overlay is too wide
</h2>
<div style="position: relative;">
<div class="buttonized-hover-overlay"
style="opacity: 0; top: 0px; bottom: 0px; right: 0px; left: 0px; position: absolute; background-color: rgba(0.4, 0.48, 0.71, 0.6);">
</div>
<button>
asdf
</button>
</div>
Attempted solution
I then solved this by adding a max-width: fit-content (which works in Chrome, I need -moz-fit-content for Firefox) over the parent div:
.buttonized-hover-overlay:hover {
opacity: 100 !important;
}
<h2>
so i added a fit-content to the parent div. now the hovered part fits what's inside.
</h2>
<div style="position: relative; max-width: fit-content;">
<div class="buttonized-hover-overlay" style="opacity: 0; top: 0px; bottom: 0px; right: 0px; left: 0px; position: absolute; background-color: rgba(0.4, 0.48, 0.71, 0.6);">
</div>
<button>
asdf
</button>
</div>
This mostly works, but... what if I want the button to take up the full width?
Sometimes, what I really want is the inner content to take up all the available width. I'm going to revert the max-width: fit-content; in the parent for just a moment, and show how I would like the inner content to look in some cases:
.buttonized-hover-overlay:hover {
opacity: 100 !important;
}
<h2>
if we remove the <code>max-width: fit-content;</code> from the parent, the inner content can fill up the available horizontal space. THIS IS WHAT I WANT. but as you can see from the example below, reapplying will <code>max-width: fit-content;</code> (or `display: inline-block`) prevent the button from taking up all the available space.
</h2>
<div style="position: relative;">
<div class="buttonized-hover-overlay"
style="opacity: 0; top: 0px; bottom: 0px; right: 0px; left: 0px; position: absolute; background-color: rgba(0.4, 0.48, 0.71, 0.6);">
</div>
<button style="display: block; width: 100%; max-width: 100%;">
asdf
</button>
</div>
So here's the problem. If I leave the max-width: fit-content on the parent div, I can't get the child div to take up the remaining space, no matter what I try.
.buttonized-hover-overlay:hover {
opacity: 100 !important;
}
<h2>
tried setting both the width and max-width of the child, but it is still getting constrained by the <code>max-width: fit-content;</code> on the parent, for some reason
</h2>
<div style="position: relative; max-width: fit-content;">
<div class="buttonized-hover-overlay" style="opacity: 0; top: 0px; bottom: 0px; right: 0px; left: 0px; position: absolute; background-color: rgba(0.4, 0.48, 0.71, 0.6);">
</div>
<button style="display: block; width: 100%; max-width: 100%;">
asdf
</button>
</div>
I tried setting both the width and max-width of the child to 100%, but for some reason, these won't take up all the available horizontal space. How can I achieve what I'm trying to do? The only way I can say it succinctly is:
How can I make a hover overlay in HTML+CSS that both fits over the content and lets it expand?
Open to having the hover effect work in a different way. I can't just set the background color, because it has to work with any element, including images, and elements that may have one or many background colors.
Edit: Add a JSFiddle for anyone who wants to play with it.
This might work for you.
.buttonized-hover-overlay:hover {
opacity: 100 !important;
}
<div style="position: relative; display: inline-block;">
<div class="buttonized-hover-overlay"
style="opacity: 0;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
position: absolute;
background-color: rgba(0.4, 0.48, 0.71, 0.6);">
</div>
<button>
long content in button
</button>
</div>
I am trying to set a div at the right side, superimposed to a video tag element which has a poster attribute but for any reason, when I set the property right: 0 to align it at the right side, it is aligned to the right side of the document.
<div class="screen-container">
<div id="delete"></div>
<video id="preview"></video>
</div>
#screen-container{
width: 515px;
height: 600.23px;
}
#delete {
width: 40px;
height: 40px;
background-color: white;
background-size: 500px;
background-position: -97px -75px;
margin: 10px 10px;
cursor: pointer;
position: fixed;
z-index: 1;
}
#preview{
width: 100%;
height: 100%;
}
I have also tested to put the <div id="delete> inside the <video> but the <div> element wasn't vissible.
<div class="screen-container">
<video id="preview">
<div id="delete"></div>
</video>
</div>
Any idea of what is happening?
Thanks in advice
fixed positioning removes the element from the flow of the document and can not be contained within a parent. Use position: absolute instead and set the parent .screen-container to position: relative.
Following the answer of jmore009, I had a problem with elements that were comming behind.
To solve that other case, I just added did what I show at the code below:
<div class="screen-container">
<div id="delete"></div>
<video id="preview"></video>
</div>
<div class="screen-aux"></div>
.screen-container{
position: absolute;
}
#delete{
width: 40px;
height: 40px;
background-color: white;
background-size: 500px;
background-position: -97px -75px;
margin: 10px 10px;
cursor: pointer;
position: absolute;
z-index: 1;
right: 0;
}
That allows me to add vissible elements behind by keep using position relative.
Thanks!
I am trying to make an image swap but it is not working. gpu.jpg is showing and dissapering when I hover over it, but it flickers invisible and visible. But gpu_replace.jpg does not display at all, what am I doing wrong? bellow is my code:
HTML
<div id="contents">
<h2><center>What are the components of a graphics card and what do they do?</h2>
<h3><center>Bellow a GTX 980 PCB.</h3>
<div style="position: relative; left: 0; top: 0; bottom: 100px;">
<img src="pic\980_pcb.jpg" style="width:908.2px;height:398.05px position: relative; top: 0; left: 0;"/>
<span class="imgswap">
<img src="pic\gpu.jpg" style="position: absolute; top: 115px; left: 273.5px;"/>
</span>
</div>
</div>
CSS
span.imgswap {
background-image: url("pic/gpu_replace.jpg");
background-repeat: no-repeat; display:block;
}
span.imgswap:hover img {visibility:hidden;}
This solution might help you.
HTML
<span class="imgswap"> </span>
CSS
span.imgswap{
background: url(http://stackoverflow.com/users/flair/4021429.png) no-repeat;
height: 58px;
width: 208px;
display: block;
}
span.imgswap:hover{
background: url(http://stackoverflow.com/users/flair/4021429.png?theme=hotdog) no-repeat;
}
span by default is not block element, so in your code span.imgswap has a computed height of 0. This is why you can't see "gpu_replace.jpg", even though it has a visible child!
When you hover "gpu.jpg", its parent node span.imgswap is also hovered, so span.imgswap:hover img {visibility:hidden;} makes "gpu.jpg" invisible, and then... it's invisible so it's not hovered --> its parent is not hovered --> span.imgswap:hover img {visibility:hidden;} is not applied --> "gpu.jpg" apprears again --> .... That's why "gpu.jpg" flashes.
This is my image-button for my website.
http://puu.sh/cK7Sf/6309c39cdb.jpg
When I re-size my browser it goes over here
http://puu.sh/cK7VU/f17dafcc41.jpg
Here is my code
HTML
<div class="Nav">
<div id="buttons">
<div id="home_button"></div>
CSS
#home_button {
background-image: url("home.png");
background-repeat:no-repeat;
background-size: 100%;
width: 150px;
height: 60px;
position: absolute;
top: 196px;
left: 502px;
z-index: 10;
}
#buttons div need to have a position: relative; set for abosolut position to vork as you want.
You will want to remove "position: absolute;" and use "float: left;"
Project link:
http://50.87.144.37/~projtest/team/design/AHG/brochure/#28
The dark grey stripe at the bottom is an anchor tag, I can't seem to figure as to why it is not clickable. The css is very simple. The parent class is posRel and the anchor tag is efgLink3 and 'bg-img' is the image over which a tag is arriving.
Html:
<div class="container posRel">
<a class="efgLink3" target="_blank" href="http://www.efginternational.com/"></a>
<img class="bg-img" src="pages/preview/cover-back.jpg" style="height: 587px; width: 415px;">
<img class="bg-img zoom-large" src="pages/preview/cover-zoomed-back.jpg" style="height: 587px; width: 415px;">
</div>
Css:
.posRel{
min-height: 100%;
position: relative;
}
.efgLink3 {
background: none repeat scroll 0 0 #333;
display: block;
height: 70px;
left: 0;
position: absolute;
top: 79%;
width: 100%;
z-index: 11;
}
.bg-img {
left: 0;
margin-top: 10px;
max-width: 100% !important;
position: absolute;
top: 0;
z-index: 10;
}
Problem is in your HTML:
<a href="http://www.efginternational.com/" target="_blank" class="efgLink3"/>
Your anchor is empty, so there's nothing to click on.
<img src="pages/preview/cover-back.jpg" class="bg-img"/>
<img src="pages/preview/cover-zoomed-back.jpg" class="bg-img zoom-large"/>
Presumably one or both of these belongs inside the anchor.
Found the issue, 'pointer-events' was set to none, thanks to all for looking up.