How can I change an image (set using <img> tag, which is not a <div> or <some_selector> background, that can be easily solved by changing background or background-image attribute on :hover in CSS) on mouse rollover (hover) like the favorite tag remove button in stackoverflow homepage, in which the (X) image becomes red on hover ?
HTML
<div id="css-image-swap-1">
<img id="swap-1" src="default-image-url" alt="CSS image swap" />
</div>
CSS
#css-image-swap-1{
width:300px; height:150px; background:url(swap-image-url);
}
#css-image-swap-1 img:hover{
opacity:0;
}
Related
I'm having trouble getting the right selector.
Let me try to explain the best way I can:
I'm working on a project that I cannot change HTML and Javascript, it has some dynamic HTML and other reasons.
On the project, there is an image on a <img> tag.
However, I need to change colors between two layouts, and as you can see on the HTML/CSS the only way I got that to work is to hide th <img> tag and set a background to the anchor, that has a title.
So, now, when I change the layouts, the image changes, however there is also something else, this image on click hides the menu and changes the image one more time.
Now, I need to hide the background on the anchor when the title on the image changes.
Here is the HTML BEFORE clicking the image
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Esconder menu horizontal" id="imgHideMenu" src="images/ico_hidemh.png" width="16" height="16">
</a>
</li>
</ul>
And here is the HTML AFTER I click on the image
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Exibir menu horizontal" id="imgHideMenu" src="images/ico_showmh.png" width="16" height="16">
</a>
</li>
</ul>
THE CSS
I HIDE THE ORIGINAL IMAGE, USED ON THE OTHER LAYOUT
#ul-icone-mh li a img {
visibility: hidden !important;
}
AND SET THE NEW IMAGE
a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
}
And when I click it, the image stays the same, but I need to hide that image when the title changes and add another image.
Any ideas what I can do?
You need a bit more than just the right CSS selector. The problem there is the old stumbling block that there is no parent selector.
A bit more thought and work is required.
img { height:50px; width:50px }
ul {padding: 0; list-style:none;}
.icones a::after {
content: '';
height:50px; width:100px;
background-image: linear-gradient(to right, #00FF00 50%, #0000FF 50%);
display:inline-block;
}
.icones a {
height:50px; width:50px;
display:block;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
.icones a img[title='Esconder menu horizontal'] {
margin-left: -50px;
}
.icones a img[title='Exibir menu horizontal'] {
margin-left: -100px;
}
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Esconder menu horizontal" id="imgHideMenu" src="http://placehold.it/200/ff0000" width="16" height="16">
</a>
</li>
</ul>
</div>
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Exibir menu horizontal" id="imgHideMenu" src="http://placehold.it/200/990000" width="16" height="16">
</a>
</li>
</ul>
</div>
Here I've increased the images to 50x50px from 16x16px to make them a bit easier to see but the principle is just the same.
For the two images referenced by the HTML, I've used two blocks that are different shades of red.
For the two CSS overlay images, for simplicity I've used a linear gradient making a block that's the height of the image and twice the width. The left half is green and the right half blue. You would use a sprite for the two images you want to display. The left half of the sprite would contain the "Esconder ..." replacement image and the right half of the sprite would contain the "Exibir ..." replacement image.
I've also shown both cases together rather than switching between them on click, again for simplicity.
The idea is that the left margin of the image is made negative to shift it out of the a element. The pseudo element that follows contains the sprite and is shifted into that space, either by the width of the image, or twice the width of the image to show different contents for the two cases.
Hence we get a green box for the "Esconder ..." case and a blue box for the "Exibir ..." case.
So if I understand correctly, then the title is "esconder", you want to hide the default image and inject your own. And otherwise you want to show the original (when the title is "exibir".)
You have correctly identified how you would target the a tag based on the title: a[title="Esconder menu horizontal"]. What you then need to do is only exclude the image when it is inside of this tag, and then replace it with your own image. You then also need to give it an explicit size, and declare the a tag which now directly has the background image with some size. Like so:
a[title="Esconder menu horizontal"] img { display: none; }
a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
display:inline-block;
}
You will notice I added a few lines to your existing styling:
display:inline-block tells the browser that this element should follow the flow like an inline element, but should have block-type semantics. By default, an anchor tag is an inline element, which means it doesn't have explicit size or width -- just what is enforced by its children. Since you've delcared that the child is not to be seen, the anchor tag effectively collapses to be of 0x0 size.
height:16px; width:16px tells the browser the size you want for this image. I guessed at these dimensions based on the background-size property you had set. Since we've told the browser using the display property that this element has explicit size, we now tell it what that size is.
It's not very clear what you're trying to accomplish, but if you're trying to change the anchor based on the image, this is simply not possible using CSS alone.
You can target child elements based on their parents, but you can not target parent elements based on their children in CSS (currently).
The only way to do this would be to affect how the HTML renders the two options, or using Javascript.
There are a few different suggested specs for such a selector, but none have yet been implemented.
Since the img tag is what has the dynamic title, that is the only thing you will be able to target with your CSS. If you cannot accomplish your task by targeting the img then it can't be done within the constraints you stated.
Selectors:
https://www.w3.org/TR/CSS2/selector.html
Support for the proposed spec for a parent selector:
https://caniuse.com/#feat=css-has
I have image tag
If the user has disabled the download of pictures or for some reason they did not load properly, then place icons should appear comfortable text, like this:
And yet, there may be an image of circles, transparent in the middle, it means that simply the text under the picture will not post.
What there are ways of making such alternative text - NOT using JS,it test task and it says there is solution wothout JS ?
Property 'alt' - unusable because I must set text with color (Attached image)
Just set the alt attribute to your text and style it using CSS:
<img id="myImage" src="" alt="Some text" />
CSS:
#myImage {
color: red;
}
More information: How to style alt text color?
You can style the alt text displayed on a broken image. Use the color: style on either the image itself or on the image's container (the image will inherit the color).
Demo Fiddle
HTML:
<div class="container">
<img src="notarealimg.jpg" alt="lorem ipsum">
</div>
CSS:
.container{
color: red;
}
img {
width: 100px;
height: 100px;
}
How do i make my transparent gif image a link which the link won't respond if press the transparent part?
<img src="skins/sunlift/styleImages/navbar_pic/leafshape.gif>
Any ideas?
<img src="skins/sunlift/styleImages/navbar_pic/leafshape.gif>
here is the problem ----------------------------^-- there should be "
should be
<img src="skins/sunlift/styleImages/navbar_pic/leafshape.gif">
............................................................
hi now give to your anchor link display properties as like this
a{
display:inline-block;
vertical-align:top;
}
because a is inline block element
Border is not removing in the below code, which is image sprite . I have tried some methods to remove the border using style and border 0 ,but no use .
<style>
img.home{width:40px;height:32px;
background:url(share.png) 0 0;
border-style: none;}
img.next{width:40px;
height:32px;background:url(share.png) -36px 0;
border-style:none;}
</style>
<a href="http://www.yahoo.com/">
<img class="home" border="0">
</a>
<img class="next" border="0"/>
JSFIDDLE
Images come with a default border, that only disappears when the image is downloaded. That image comes from the src attribute of the image. If no src is set, then the image won't be downloaded, and the border will be forever there - your case exactly.
A normal img tag looks like this:
<img src="/something.jpg" />
yours looks like this:
<img />
You're adding your image through css's background-image. Not as it should be done. You can add a background image, but it's usually for other purposes. (check the aside at the bottom).
Try removing the background image and placing the image location on the src attribute of the image. Like this:
<img class="next" src="/share.png" />
You'll see the image has no border now.
Aside
When a background image is added to an img element, it's usually to provide a placeholder image for when no img src is set. Think of avatars on the comments section of a blog.
Also
When creating a sprite, you can use divs ps ems etc. Remember, the background-image can be applied to any element!
Suppose your html tag is <img class="somthing" /> and in the class "something" you have defined the background position of the image.
As you select a particular image from the image sprite more accurately, a particular position where the image is. Your class is proper where you fetch the image using the background position in css.
A simple solution to remove the border is just make the img tag as a div.
if you fetch the image according to the background position why it is necessary to use a img tag.
Just write the html like ...<div class="next" ..>
you can use a base64 very small transparent image, if you would not use an external file
<img class="next" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
Found it out, JOPLOmacedo was right, but you don't have to remove the background, just use the src tag. JSFIDDLE. (Sorry about the images, but I needed them to test the src)
HTML:
<a href="http://www.yahoo.com/">
<img class="home" src="http://jsfiddle.net/img/logo.png" border="0"/>
</a>
<img class="next" src="http://jsfiddle.net/img/social-icons/facebook_16.png" border="0"/>
CSS:
img.home{width:40px;height:32px;
border: none; background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) 0 0;}
img.next{width:40px;
height:32px;
border:none; float: right;
background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) -36 0;}
I need an on hover semi-transparent div which causes some text to appear over the top of a thumbnail image? Is it possible to do this without using JavaScript and using just Cascading Style Sheet?
You can try something like this:
<style type="text/css">
.thumb {position:relative;width:200px;height:20px;}
.thumb:hover .overlay {opacity:0.5;}
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;}
</style>
<div class="thumb">
<div class="overlay"></div>
<img src="image.gif" />
</div>
Ok ok I know this is old but i ran into and have something to add about opacity settings
http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/
give that a look over, I find using rgba when ever possible over opacity procuces a much better result, opacity can work funny in different browsers and cause all manner of asthetic problems...
just my 2 cents
Depending on what you're doing with the thumbnail, you could set the background of the DIV as the image, include the text, and use CSS to toggle the visibility from transparent to solid on hover.
This'd only work cleanly if you have a known-size thumbnail (because it's hard to autosize a div to the size of its background image), but it'll make for a simple solution in your html:
<div class="thumb" style="background-image: url(thumb.jpg);">
<p>mouseover text</p>
</div>
The important css would be something like this...
div.thumb p { visibility: hidden; }
div.thumb:hover p { visibility: visible; }
Not sure from your question whether the whole div is supposed to be transparent or just the text, but you can apply the relevant CSS at either level.