I have an img within an link within a list:
<li class="list-group-item">
<a class="video-thumbnail-link" href="javascript:void(0)" data-bind="click: (function(guid){ x.y.z.someFunction(guid); }).bind($data, $data.Guid)">
<img class ="video-thumbnail-icon" alt="picture" src="/Content/Images/picture.ico" />
</a>
<a class="anotherrandomcss" ...>
<img class="randomcss" ></img>
</a>
</li>
I want the first image to appear only on a .hover but I know img does not support CSS .hover so I apply it to the link. My css :
.video-thumbnail-icon{
height: 20px;
left: 100px;
position: absolute;
width: 20px;
}
.video-thumbnail-link {
visibility: hidden;
}
.video-thumbnail-link a:hover {
visibility: visible;
}
This hides my link and my img but on hover, it doesn't reappear.
Any idea how I could do this?
Btw, the only reason why I don't use background img is that in the same li, there is another img and this one is bound with knockout and it hides the other images's background. The first one needs to appear on top.
So what I did here; hide the a tag and since all img and a tag inside the li. so on :hover I just make it visible.
Check DEMO.
.video-thumbnail-link {
visibility: hidden;
}
.list-group-item:hover a {
visibility: visible;
}
Related
I have a giant list of images currently in an unordered list and i'm now trying to alter it to display another image over the original only when hovered and in process of that, hide the original image.
I can almost get it to work with the below code but it's only hiding the original picture and not bringing the new picture into view.
.mainImg {
opacity: 1;
}
.mainImg:hover {
opacity: 0;
}
.hidgeImg {
display: none;
}
.hideImg:hover {
display: inline-block;
}
<!-- dont know if the picture CSS is relevant but here it is -->
#pictures li {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
#pictures img {
vertial-align: top;
max-height: 350px;
}
<ul id="pictures">
<li>
<a href="/"><img src="image1.jpg" class="mainImg">
<img src="image2.jpg" class="hideImg">
</a>
</li>
</ul>
I have commented the code where it is relevant to you.
You were very close, what needs to happen is you need a parent element that, when hovered over, will handle the hovering events for each of its parent images.
If you remove the ability to see mainImg on hover for example, then there is no element to be hovering over that makes hideImg display.
If you have a parent object to hover over, that is always 'displayed' (but never has any visual other than its child img) then you can handle hover events via thisparent.
This is down by specifying what is being hovered over, followed by the query/selector of the element you want to change (E.G .parent:hover .child{CSS HERE;})
<head>
<style>
//When parent is hovered voer, make main hidden and hideen displayed
#hoverelement:hover .hideImg{
display: inline-block;
}
#hoverelement:hover .mainImg{
display: none;
}
//Hide Img is hidden by default
.hideImg{
display: none;
}
<!-- dont know if the picture CSS is relevant but here it is -->
li {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
img {
vertial-align: top;
max-height: 350px;
}
#MainArea{
background-color:tan;
padding:5%;
}
</style>
</head>
<body>
<div id="MainArea">
<ul id="pictures">
<li>
<a href="/" id="hoverelement"><!--Add a parent element to handle hovering -->
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="mainImg">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="hideImg">
</a>
</li>
</ul>
</div>
</body>
CSS
I am trying to make different images appear over different link sizes when the mouse is hovering over the links. Just like in this page. Note that the images appear right next to the links without overlapping them. Is there a way to do this automatically or is it necessary to configure link by link?
So far, i was only able to make this:
.popup {
position:relative;
text-decoration:none;
}
.popup span {
position:fixed;
top:170px;
width:350px;
left:-999em;
}
.popup:hover {visibility:visible}
.popup:hover span {left:800px;}
* html .popup span {position:absolute;}
<p><a class="popup" href="#">Ship 1<span><img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817"></span></a> </p>
You can make it using display but also position: absolute to be sure to not break the page structure:
DEMO with image out of a link (same effect as your link):
.d-flex{
display:flex;
}
.popup {
display:block;
text-decoration:none;
}
.popup + .popover-img {
position: relative;
}
.popup + .popover-img img {
display:none;
}
.popup:hover + .popover-img img {
display:block;
position:absolute;
}
<p class="d-flex">
<a class="popup" href="#">Ship 1</a>
<a class="popover-img" href="#">
<img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817">
</a>
<span>Lorem Ipsum</span>
</p>
DEMO with image in a link
.d-flex{
display:flex;
}
.popup {
display:block;
text-decoration:none;
}
.popup .popover-img {
position: relative;
}
.popup .popover-img img {
display:none;
}
.popup:hover .popover-img img {
display:block;
position: absolute;
top: 0;
left: 0;
}
<p class="d-flex">
<a class="popup" href="#">Ship 1 <span class="popover-img" href="#">
<img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817">
</span></a>
<span>Lorem Ipsum</span>
</p>
You have the image inside the anchor. Move it outside, right beside the link with no space. I think it should work fine like that. Remove the span if you don't need it.
<p>
<a class="popup" href="#">Ship 1</a><img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817">
</p>
Note: this should solve the positioning problem but not showing (popping up) the image, which should be a different question.
Try this css:
.popup {
position:relative;
text-decoration:none;
}
.popup span {
position: relative;
}
.popup span img {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 250px;
}
.popup:hover {visibility:visible}
.popup:hover span img {display: block}
Just make the image display block on hovering in the popup
I wanted to make this linkable image to have a text in a pop up box (not the type of pop up that is on w3schools, I want a classic yellowish box) when I mouseover. I tried to do it like this
<div class="folder1">
<a href="yourlinkhere" target="_self" >
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
title="This is some text I want to display." </a>
</div>
Opening the page in the link works great but there is no pop up box when I hover on it. Any help?
Currently, you are setting the title attribute to get a tooltip type hint when the element is hovered over. If this is what you are looking to do but perhaps just style the textbox to be, say, yellow, I would suggest using the following:
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>
The above code was provided by Peeyush Kushwaha in this post. Simply change the anchor tag to your image tag, and apply styles as you see fit.
If by 'popup' you are looking for an alert to the user that requires interaction to close, you can use window.alert('text') in javascript in conjunction with the onmouseover event handler.
<img src="some_image.png" height="46px" width="57px" onmouseover="window.alert('Some Message')"/>
Otherwise, if you are looking for another element to be displayed upon mouseover of the image, you can use a bit of javascript to display a div or paragraph (really anything) upon mouseover of the img.
function showDiv() {
document.getElementById('popupBox').style.display = 'block';
}
#popupBox {
display: none;
}
<img src="some_image.png" width="41px" height="57px" onmouseover="showDiv()"/>
<div id="popupBox">Some Popup Text</div>
You can do this simply with CSS, or you can use one of many simple 'tooltip' JavaScript options. Bootstrap for example has this tooltip functionality built-in, ready to use. If you want something basic, here's a simple CSS-only approach that you can customise to your needs:
<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->
<div class="folder1" style="padding: 200px;">
<a href="yourlinkhere" target="_self" class="popper">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
<span class="pop-up">This is some text I want to display.</span>
</a>
</div>
<style>
a.popper {
display: inline-block;
position: relative;
}
.pop-up {
display: none;
position: absolute;
left: 0;
bottom: 100%;
padding: 1rem 1.5rem;
background: yellow;
color: black;
}
a.popper:hover .pop-up,
a.popper:focus .pop-up {
display: block;
}
</style>
Basically, you position the a tag relatively so that it can have absolutely positioned children, then relying on a:hover you show / hide the child using the child element's display property.
You can equally try this using css pseudo-element
a{
position: relative;
}
a:hover:after{
display:block;
content: "This is some text I want to display";
width: 200px;
background: yellow;
position: absolute;
top:0;
padding: 20px;
}
<div class="folder1" style="margin: 70px">
<a href="yourlinkhere" target="_self" class="">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>
</div>
Seen this question asked quite a few times, but seems like solutions work for some but not others:
Code is as follows:
.headbuttons {
opacity: .7;
background-color: grey;
background-blend-mode: overlay;
display: block;
}
<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html">
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>
Tried the suggested solution of inline-block and block to display but neither worked, clickable area still much larger than image itself.
Just change your css to the following, which includes width and height:
.headbuttons {
opacity: .7;
background-color: grey;
background-blend-mode: overlay;
display: block;
width: 125px;
height: 62.5px;
}
<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html">
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>
I think you can set with width and height, something look like:
<a width="125" height="62.5">
The solution provided by Luka Kerr surely works for this particular use case. However, as a general solution, you can just add the css property display: block; to your <img> tag and the <a> around it will automatically scale to the size of your img (even when its size changes).
.headbuttons {
opacity: .7;
background-color: grey;
background-blend-mode: overlay;
display: block;
}
.headbuttons img {
display: block;
}
<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html">
<img src="C:\Users\Dom Nguyen\Documents\home_button.png">
</a>
I'm trying to apply a hover for a whole block (the same block must point to a link), but can't make this happen.
http://codepen.io/anon/pen/GogjQK
I've tried to wrap an <a> tag around the entire frame class and edit the hover states individually, but nothing happens.
This is how I'm trying to make it appear on hover, as well when the the link is clicked and active
Hope someone can help me out with this one. Thank you in advance.
You can use child selectors on your frame div to affect the children within.
For example, I added the following code to color the h3 tag when the main frame is hovers.
.frame:hover > div > h3 {
color: #00bb00;
}
If you modify your HTML slightly to be
<div class="frame">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png" class="thumbnail" />
<img src="http://placehold.it/60x60" class="thumbnail" id="hidden" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</div>
You can use the following CSS to change the image as well:
.frame:hover > .thumbnail {
display:none;
}
.frame:hover > #hidden {
display:inline;
}
#hidden {
display:none;
}
Here's an example codepen.
Try adding a hyper reference after the creation of the div that contains your block, like this:
<div class="frame"> <a href="http://stackoverflow.com">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png"
class="thumbnail" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</a>
</div>
Then in CSS, refer to the entire block as a link, like this:
.frame a {
float: left;
width: 300px;
min-height: 60px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black
}
.frame a:hover > .info > h3 {
color: green;
}
Example: codepen