I am trying to add an "external link image" to a-links with a target attribute. I have taken the image Wikipedia uses (http://bits.wikimedia.org/static-1.24wmf5/skins/vector/images/external-link-ltr-icon.svg) and converted it to base64 with http://webcodertools.com/imagetobase64converter. I want to add it as a background image to a[target]:after.
<a target="_blank" href="http://bits.wikimedia.org/static-1.24wmf5/skins/vector/images/external-link-ltr-icon.svg">External link</a>
a[target]:after {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODI2LjQyOSAtNjk4Ljc5MSkiPjxyZWN0IHdpZHRoPSI1Ljk4MiIgaGVpZ2h0PSI1Ljk4MiIgeD0iODI2LjkyOSIgeT0iNzAyLjMwOSIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDZjIi8+PGc+PHBhdGggZD0iTTgzMS4xOTQgNjk4Ljc5MWg1LjIzNHY1LjM5MWwtMS41NzEgMS41NDUtMS4zMS0xLjMxLTIuNzI1IDIuNzI1LTIuNjg5LTIuNjg5IDIuODA4LTIuODA4LTEuMzExLTEuMzExeiIgZmlsbD0iIzA2ZiIvPjxwYXRoIGQ9Ik04MzUuNDI0IDY5OS43OTVsLjAyMiA0Ljg4NS0xLjgxNy0xLjgxNy0yLjg4MSAyLjg4MS0xLjIyOC0xLjIyOCAyLjg4MS0yLjg4MS0xLjg1MS0xLjg1MXoiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
}
The image seems somehow to be there. Chrome inspector seems to know about it, but nothing is shown however. Why is the image not shown? Or rather, what is the minimum CSS I need to add to make the image display?
Here is a fiddle: http://jsfiddle.net/lborgman/8CTWa/
The pseudo element has no dimensions: http://jsfiddle.net/8CTWa/3/
a[target]:after {
background-image: url(...);
content: "";
display: inline-block; /* so we can give dimensions */
height: 50px;
width: 50px;
}
You can also insert the image within content: http://jsfiddle.net/8CTWa/4/
a[target]:after {
content: url("...");
}
Related
I'm working on my website and was originally using two separate images at the size of 210 by 210px for an image link (which changes into another image when hovered over.) However I found that there was always a little flicker when first hovering over the image which obviously bothered me so I decided to switch to a CSS sprite with two the images on it instead. That way I wouldn't get the flicker.
Unfortunately, I can't seem to get the CSS sprite to work successfully. I'm creating my website in Wordpress BoldGrid Post and Page Builder so I'm not doing the HTML/CSS, but the Customizer allows me to add my own Custom CSS which is what I'm doing.
I've given the image link the CSS ID "home" in the image settings (in Post and Page Builder). This is what I've put in my Custom CSS:
#home:hover a {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
background-position: -210px 0;
}
Currently, the original image isn't budging and I can see the hover image UNDERNEATH the original image (It's border is thicker and I can see it underneath).
I must have missed something with this. Because I'm working in a Wordpress Post and Page Builder it makes following CSS Sprite tutorials online not as straightforward. Hopefully it's a easy fix.
:hover is being used incorrectly...
by using #home:hover a you are only applying the background to the a when the element #home is hovered...
it should be:
#home a {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
}
#home:hover a {
background-position: -210px 0;
}
Something like below:
#home a img {
display: none;
}
#home a {
background:url("https://via.placeholder.com/420x210");
position: absolute;
width: 210px;
height: 210px;
display: block;
}
#home:hover a {
background-position: -210px 0;
}
<div id="home">
<a href="#">
<img src="https://via.placeholder.com/210x210?text=original%20image">
<a>
</div>
Ok so, I have this map:
I need to add a rollover effect to the country names (this could be done with a simple :hover in CSS) but I can't find a good way to select just a portion of the text so if I hover "Europe" it just highlights Europe and not every word.
The image is in a PSD so I have access to the base map + layers. How could I approach this? I was thinking about adding all the text in HTML and style it in CSS (rotating, spacing and such), which would take ages, and it would also be a pain to manage when adapting for different resolutions.
Can you masters suggest anything? Thanks :)
The images for reference (text made red just to show there's something there, this would be the rollover effect):
Here's an idea:
body {
position: relative;
}
img {
width: 100%;
}
.states {
position: absolute;
top: 0;
left: 0;
display: none;
}
.map-container {
width:960px;
transform-origin: 0px 0px;
transform: scale(0.8);
}
a.state-name {
position:absolute;
}
a.state-name:hover {
background-image: url("http://i.stack.imgur.com/aB42n.gif");
}
a#europe {
background-position: -420px -140px;
left: 420px;
top: 140px;
height: 45px;
width: 210px;
}
<div class="map-container">
<img src="http://i.stack.imgur.com/319c9.gif" />
<img src="http://i.stack.imgur.com/aB42n.gif" class="states" />
<a id="europe" class="state-name" href="#"></a>
</div>
Note:
you need to define for each country name a a tag and proper css rules: background-position, width, height, left, top like for #europe example
.map-container - must have the same width as the original image 960px
you need to use JS or CSS transform property to scale the whole .map-container if you need to resize the map, otherwise the hover elements will be misplaced.
Pay attention to css transform properties
This is an experimental technology. Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
I am confused about using CSS to display an image using the an empty <a> element.
<a class="header" href="#"></a>
does create the clickable area as specified in the following css:
.header { width: 50px; height 50px; background-image:url('images/picture.png') }
however, will not display the picture. If I also include:
.header:hover { background-image:url('images/picture.png'); }
then it will display the picture. My aim is to use the CSS to employ this method of image-to-image replacement, but I don't have the basics understood yet it would seem.
Your on the right track with your css. You must add display:block to allow the anchor tag to pick up the hight.
.header { width: 50px;
height 50px;
background:url('images/picture.png');
display:block;
}
I have an unordered list of links and each link has a unique id.
I'm using that id with the :before selector to place
the associated website's favicon before the link (using the content property).
One of these icons is twice the size of the others.
Is there any way to change the size of this icon using CSS?
If the answer is no, is there any way to do this other than editing the image?
Visual reference:
Here is what I tried (and it doesn't seem to work):
#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 50%;
width: 50%;
}
I've run into the same problem before. Try this:
#geog:before
{
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
content: "";
background: url("icons/geogebra.ico") no-repeat 0 0;
background-size: 100%;
}
I'm sure you'll have to tweak those values, but that worked for me. Of course, this won't work if you can't set it as a background image for some reason. Best of luck to you!
I believe you are looking for the zoom property. Check this jsfiddle
Also you can add spacing with margin-right between the icon and the content of the element.
Use PX instead of %
#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 5px;
width: 5px;
}
Give that a try :-)
I am using HTML and CSS to create a webpage. I want to create buttons that are of a .gif file that I already have. I am using div to place items in the page itself. How do I use the image, and also use the rollover features so that the image changes to a different image I have that is a different color.
Thanks.
Changing the image url works, but can be a nuisance if the images are not preloaded or the user's cache is disabled.
Check out sprites FTW.
http://css-tricks.com/css-sprites/
A quick definition of a sprite is a large image, containing several smaller images. So a 10x20 image, with the normal state being the upper 10x10, and the hover state being the lower 10x10. The user only sees the upper 10x10 due to the CSS:
.button
{
display: block;
width: 10px;
height: 10px;
background-image: url(to-image.gif);
background-repeat: no-repeat;
background-position: top left;
}
then on hover, it shifts to the bottom part of the image
.button:hover
{
background-position: bottom left;
}
Make the button element a fixed size, and set the .gif file as the element background in CSS. Then you can use a :hover class on the element to change the image. Here I'm using an "A" tag so it works on IE6.
<a class="button"></a>
.button {
display: block;
background-image: url(default.gif);
width: 100px;
height: 20px;
}
.button:hover {
background-image: url(hover.gif);
}