I found this useful html as answer to a question about rollover image to text by renocor (rollover a text hyperlink to become an image)
<style>
.changeable img
{
display:none;
}
.changeable:hover span
{
display:none;
}
.changeable:hover img
{
display:inline-block;
}
</style>
<span>Hyper Text</span><img src="img.png" />
but i needed to achieve the opposite effect. So i inverted span with image it partially works. Meaning that instead of the image i see the text but the problem is that the image doesn't disappear but shifts just below the text.
Any suggestions?
Thanks
.changeable span
{
display: none;
}
.changeable:hover image
{
display: none;
}
.changeable:hover span
{
display: inline-block;
}
</style>
<span>Hyper Text</span><img src="img.png" />
Check the <style> and put img instead of image, worked for me.
.changeable:hover img
{
display: none;
}
Related
I have two buttons that i want to replace with chevrons.
(https://fontawesome.com/icons/chevron-right?s=solid&f=classic)
.button { visibility:hidden }
.button:after { visibility:visible; content:'>'; font-size: ~+30px }
That's the way i'd do it.
But i would rather replace the buttons with an image / svg, instead of plain " > " characters.
Any solution?
You can either use background-image for your .button:after or try below approach.
button {
border: none;
background-color: transparent;
}
<button onClick='alert("clicked");'>
<img src="https://cdn0.iconfinder.com/data/icons/merry-christmas-41/512/37-christmas-wreath-decoration-1024.png" width="48"/>
</button>
I used this article to add a display image on text link hover (see link and css used below) and it works great, however I want to ignore this css when viewing on mobile. It is important to note that this should be all css. Any ideas?
.hover_img a {
position: relative;
}
.hover_img a span {
position: absolute;
display: none;
z-index: 99;
}
.hover_img a:hover span {
display: block;
}
<div class="hover_img">
Show Image<span><img src="https://picsum.photos/536/354" alt="image" height="100" /></span>
</div>
Display Image On Text Link Hover CSS Only
You can use hover media query.
The "hover" CSS media feature can bu used to test whether the user's
primary input mechanism can hover over elements.
#media (hover: hover) {
.hover_img a span {
display: none;
}
.hover_img a:hover span {
display: block;
}
}
#media (hover: none) {
.hover_img a span {
display: block; /* always show on e.g. a touch device */
}
}
<div class="hover_img">
Show Image<span><img src="https://picsum.photos/536/354" alt="image" height="100" /></span>
</div>
Or you can use normal media query as you want. Like this:
(view on full page view)
.hover_img a span {
display: none;
}
.hover_img a:hover span {
display: block;
}
/* don't use hover for devices smaller than 720px */
#media screen and (max-width: 720px) {
.hover_img a span {
display: block;
}
}
<div class="hover_img">
Show Image<span><img src="https://picsum.photos/536/354" alt="image" height="100" /></span>
</div>
HTML (example):
<img src="" id="img-test" />
So I want to hide only anchor not img:
#media print
{
#href-test-anchor
{
display: none !important;
}
}
This code hide and img tag, is there away to do it?
Use visibility instead:
a {
border:5px solid red; /* You will not see this */
visibility:hidden;
}
img {
visibility:visible;
}
<img src="https://picsum.photos/id/10/200/200" id="img-test" />
(EDIT: because it got deleted)
Use visibility instead.
#href-test-anchor
{
visibility: hidden;
}
#href-test-anchor img
{
visibility: visible;
}
Doesn't really make sense as to why you are using an anchor, as you are not hyperlinking any text. You could use a div as an alternative; but this does work with an anchor.
I have several hundreds of icons around a legacy application:
<img class="date-picker" src="/image/datepicker.png">
Following CSS removes the datepicker.png but the font awesome icon is not displayed
.date-picker {
background-image: none;
}
.date-picker:after{
font-family: FontAwesome;
content: "\f073";
color:grey;
font-size:25px;
}
Is there a way how to achieve this without changing the IMG tags?
Pseudo-elements only get applied to images whose src attributes fail to load. If the image successfully loads, the pseudo-element will not be used.
One thing you can do is apply this to the parent element, but this obviously depends on your markup:
div {
height: 100px;
width: 100px;
position: relative;
}
div img {
display: none;
}
div::after {
content: 'foo';
position: absolute;
top: 0;
}
<div>
<img src="http://placehold.it/100x100" />
</div>
Here we hide the img element and apply the pseudo-element to the div container, then absolutely-position the pseudo-element to sit inside (well, on top of) the div.
You could wrap the image in a span and use the same class(es).
img.date-picker {
display: none;
}
span.date-picker:after {
font-family: FontAwesome;
content: "\f073";
color: grey;
font-size: 25px;
display: inline-block;
margin: 1em;
/* demo only */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<span class="date-picker"><img class="date-picker" src="/image/datepicker.png"></span>
Using jquery you can find all the img tag and wrap the img in a figure tag and apply the icon class to that.
I'm trying to make a pure CSS image change on hover / rollover without using background images. So far I have one image and when you rollover that image, another image appears. Here is the CSS:
#hidden {
display: none;
}
#visible:hover + #hidden {
display: block;
}
So, when you rollover the #visible div, the #hidden div appears. Here is the jsFiddle: http://jsfiddle.net/MNyzd/1/
This works great, but it is not exactly what I want to accomplish. I would like the images to swap. So when you rollover #visible, it should disappear instead of remaining visible. My first initial idea was to make the #visible div to display:none on hover (#visible:hover display:none;), but this did not work.
So does anyone have any idea how I would successfully turn this into a traditional image hover / swap using this method? Any help would be appreciated and again, here is the jsFiddle... http://jsfiddle.net/MNyzd/1/
Use a container where you do the hover on:
http://jsfiddle.net/MNyzd/8/
.hidden {
display: none;
}
.container:hover .visible
{
display: none;
}
.container:hover .hidden {
display: block;
}
See also this answer: Hide / show content via CSS:hover (or JS if need be)
Like this?
jsFiddle
div {
cursor:pointer;
overflow:hidden;
width:300px;
}
div > img:nth-child(2), div:hover > img:nth-child(1) {
display:none;
}
div:hover > img:nth-child(2) {
display:block;
}
http://jsfiddle.net/MNyzd/4/
EDIT: The code:
#hidden {
display: none;
position: absolute;
top: 8px;
left: 8px;
}
#visible:hover + #hidden {
display: block;
}
#hidden, #visible {
width:300px;
height:300px;
}
<div id="visible"><img src="http://b.vimeocdn.com/ps/372/159/3721596_300.jpg"></div>
<div id="hidden"><img src="http://yuccan.com/wp-content/uploads/2013/04/cool-eez-spaced2.png"></div>