how do you set up a link/image so when you hover an image, a link on the page turns to the hover state and vice versa?
Similar to what this site has:
http://www.adrianlawrence.co.nz/
Any help would be great!
Thanks!
You can attach an event listener to one (image or link) to listen for mouseover. Have that fire a function which will find the element of the matching ID (image and link matching, ie image id = "image1", link id = "link1") and change the CSS.
Pure CSS and HTML can definitely be used to create an effect similar to the website you linked to.
Check out this fiddle.
Place both your link text and your image within one a element.
Give each of your images a distinct ID.
Use CSS to position your image absolutely (or relatively, your call) at the desired location.
The HTML:
<a href="www.google.com">
Hello there.
<img id="img1" src="[SOURCE]" alt="Be Happy!" />
</a>
The CSS:
/* The Important Stuff */
#img1 {
position:absolute;
bottom:20px;
right:45px;
}
a:hover {
text-decoration:none;
}
a:hover img {
opacity:.8;
}
/* The Unimportant Stuff */
body {
background-color:black;
}
a {
color:white;
}
Related
I am trying to change the product image when the user hovers over it, with pure CSS, on the Woocommerce product archive page.
In my CSS I am targeting the individual product for hover and covering it with the second image stored in my Woocommerce product image gallery.
My code partially works. When I hover over the product image, the second image is displayed, but it is behind my original image and the size ratio is wrong. I have tried using z-index:9999 but it is having no effect on the ordering.
How can I change my original product image with my second image when user hovers on it?
Here is the webpage showing below incorrect hover behaviour. CSS only enabled for the first product:
Link
My Code:
/* Selecting the individual product image */
.post-1394.product.type-product.status-publish.has-post-thumbnail.product_cat-protein.first.instock.shipping-taxable.purchasable.product-type-simple:hover {
/* Replacing the product image with my secondary image from gallery */
background: url(https://proteinandpantry.com/wp-content/uploads/2018/09/BeefJerkySaltAndPepper-324x324.jpg)
no-repeat;
z-index: 9999;
}
Screenshot of result when hover over product:
This is because you're using a background-image on the <li> element, as opposed to the <img> element itself. Because this is a parent element of the image, the background will never be shown above the image itself.
If you would like to keep the background image on the parent element, you could simply add a rule of opacity:0; for the child <img> element on hover.
e.g.
.product.type-product:hover img {
opacity:0;
}
This will set the image opacity to 0 when you hover over the parent <li> element.
Another option you have is to add a container to the <img> element, and use a :before selector on that container element with the secondary image as the background image.
This would look something like:
ul.products li.product img {
position:relative;
}
ul.products li.product .product-image-container:before {
content:"";
display:none;
background: url(https://proteinandpantry.com/wp-content/uploads/2018/09/BeefJerkySaltAndPepper-324x324.jpg) no-repeat;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
And then show the before on hover of the parent:
.product.type-product:hover .product-image-container:before {
display:block;
}
See an example of this here:http://jsfiddle.net/g5u4Lbxn/
Most browsers don't support the :before selector on images, so you'll need to add a container element for the image
With the image container element, the HTML for that particular <li> element should look like this:
<li class="post-1394 product type-product status-publish has-post-thumbnail product_cat-protein first instock shipping-taxable purchasable product-type-simple">
<h2 class="woocommerce-loop-product__title">Spicy Teriyaki Turkey Jerky</h2>
<div class="product-image-container">
<img width="324" height="324" src="https://proteinandpantry.com/wp-content/uploads/2018/09/TurkeyJerky-324x324.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image">
</div>
<div class="star-rating">
<span style="width:100%">Rated <strong class="rating">5.00</strong> out of 5</span>
</div>
<span class="price">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>2.50</span>
</span>
Add To Box
<a class="xoo-qv-button" qv-id="1394"><span class="xoo-qv-btn-icon xooqv-search xoo-qv"></span>Learn More</a>
</li>
The problem is that the original image is an image tag instead of being the background. What you are doing is adding a background behind the product div which is going behind the whole product, including the image for it. There isn't a way to replace the source of an image with CSS, but you can do it with Javascript. Replace image by javascript
I'm late to the party... but this works
/* wooCommerce product page image hover / change image * <--- just do this once/
.product.type-product:hover img {
opacity :0;
z-index: -1;
}
/*Bezel Set Emerald Ring #6489* <--- you will need to do this for each post/
.post-6489 .fusion-image-wrapper {
background-image: url("https://www.caesarsdesigns.com/wp-content/uploads/2019/05/emerald02.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: 223px 224px;
}
Where 223px 224px is the size of the img container.
I have a scenario in which I have a team page with pictures and some blurb. Under each picture I have social media links much like the following:
These are images that sit within a horizontal list underneath each item using the below base markup.
<ul>
<li>
<a><img src=""/></a>
</li>
<li>
<a><img src=""/></a>
</li>
</ul>
At the moment these are images but I would very much like if when hovered the grey inards of these images turned blue.
I was thinking just have a span with a background image like this:
<a><span class="linkedin"></span></a>
.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}
.linkedin:hover{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture-blue-version)
}
However, when I attempted this the space was empty instead of taking the size of the image.
If I enter as content I get a small part of the background image, furthermore giving the class an absolute position takes it out of document flos
Is this the ideal approach?
The problem is if you use a <span> element you need to set it to display: inline-block and you need to set a width for the image to show up. Then it works, here is a demo:
.linkedin {
display: inline-block;
width: 140px;
height:100px;
background-image:url(http://ipsumimage.appspot.com/140x100,ff7700)
}
.linkedin:hover {
background-image:url(http://ipsumimage.appspot.com/140x100,0000FF)
}
<span class="linkedin"></span>
As you see on the first :hover it flickers. Cause it will not load the image bevore you :hover the first time. This is why you should consider another solution. Like mentioned in some comments you could use http://fontawesome.io/icons/ and then just change the color.
To prevent flickering you could do the same with using <img> tags then the source will be loaded and ready to be shown on :hover. But it works best with also setting positions, demo like so:
a.special {
position: relative;
}
a.special img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
a.special img:first-child {
visibility: visible;
}
a.special:hover img:first-child {
visibility: hidden;
}
a.special:hover img:last-child {
visibility: visible;
}
<a class="special" href="#">
<img src="http://ipsumimage.appspot.com/140x100,ff7700">
<img src="http://ipsumimage.appspot.com/140x100,0000FF">
</a>
Best approach for this is to use SVG's and change the fill of the SVG on hover.
Your approach should work however, it might be that you've not got the correct size image? try 'background-size: cover;' Or that the element has no width. Try setting a width on the span too. (don't forget to give it 'display: inline-block;' too.
Ed: checkout https://css-tricks.com/lodge/svg/
Font-Awesome is a great idea for what you're trying to achieve. Takes less data to load the page too if you can get away with using text in place of images.
By the way, when using the :hover property there is no need to redefine the width and height of the image... Just redefine the changes you'd like to make.
I use bootstrap 3. I try to use "icon link" by using tag <a> as shown below:
HTML:
CSS:
.link {
background-image: url(img/icon.png);
}
It is important to say, that my stylesheet is in "main folder", that is in folder, where is a img folder with icon.png file. So it seems wrong url is not the case.
I can't figure out why image is not showing.
The anchor element has no content, and it has no styles that would affect it's dimensions, consequently it has an effective area of zero square pixels.
The background image is probably being applied just fine, you can't see it because there is no area on which it can be displayed.
The code implies that the image is there to tell the visitor where the link goes, that would mean that the image is content and not background and should be expressed as an image element (which would take on the dimensions of the image file automatically).
Using an image element also provides you with the opportunity to supply alt text for the benefit of screen readers / search engines / people with internet connections that briefly fell over while loading the image / etc.
<img src="img/icon.png" alt="top of page">
Because your is empty.
You need to give it a size :
.link {
background-image: url(img/icon.png);
height:100px;
width:100px;
display:block;
}
You have to make the tag enought big to show the image
Example:
CSS:
.link {
background-image: url(img/icon.png);
display: block;
width: 100px;
height: 100px;
}
I have an image we're using for navigation at the top of a website. I used to set links for each section of the banner. I want to an achieve an opaque effect on hover for each part of the image. Is this possible? Thanks much, Dane.
You could slice the image into seperate images; one for each roll over, the image would still appear to be one image but would have different sections; for the hover you could then either use javascript or have it replace the image with another that appeared opaque
This site shows both the JS method and the CSS method...
http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
just repeat it for each part of the image
You can have a div over each section. Each div would call a javascript event. This even can change the div's style. Something like this:
<javascript>
function changeCss(getId){
var getDiv = document.getElementById(getId)
getDiv.className ="myHover"
}
</javascript>
<styles>
.plain{
width:150px;
height:200px;
position:absolute;
top:0;
left:0;
z-index:1000;
background-color: #666699;
}
.myHover{
width:150px;
height:200px;
position:absolute;
top:0;
left:0;
z-index:1000;
background-color: #666699;
filter: alpha(opacity=80);
}
</styles>
<div onMouseOver="changeCss(this.id)" id="wait" class="plain">
<img src=""/>
</div>
This is just free hand and has not been tested. Give it a try and let me know if there are any issues.
I am trying to change the anchor tag image on hover and active, but it is not working.
HTML:
<div>
<div id="accordion">
<h3>test</h3>
<div class="acsection" runat="server" id="divCollection">
<ul>
<li runat="server" id="collectionmenu1">page-1</li>
<li runat="server" id="collectionmenu2">page-2</li>
<li runat="server" id="collectionmenu3">page-3</li>
<li runat="server" id="collectionmenu4">page-4</li>
</ul>
</div>
</div>
<h3>Group</h3>
<h3>Send</h3>
<h3>contact</h3>
</div>
CSS:
#aCollection
{
background-image: url(images/collection.jpg);
}
#aCollection:hover
{
background-image: url(images/collection_hover.jpg);
}
#aCollection:active
{
background-image: url(images/collection_active.jpg);
}
Try this one. it's working :).
just add src= for the hover image and when the mouse out also add src=.
<img src="blah.jpg" onMouseOver=src="blah-hover.jpg" onMouseOut=src="blah.jpg">
A tag is a inline element. You need a block element.
#aCollection {
display: block;
width: 50px;
height: 50px;
background: url('../images/image.jpg') no-repeat top left;
}
#aCollection:hover {
background-image: url('../images/image_hover.jpg');
}
#aCollection:active {
background-image: url('../images/image_active.jpg');
}
Are you absolutely sure that your CSS is targeting actual image URIs? In other words if your CSS is part of the HTML document itself then your images should be in a folder called images relative to the current HTML document.
However if this CSS is part of an external stylesheet which is located in lets say the css folder you need to use a relative path which will go one level up to access the images.
css
-> stylesheet.css
images
-> collection.jpg
page.html
Your stylesheet should contain background-image rules in the following format
background-image: url('../images/collection.jpg');
BTW, using separate images for what you are trying to achieve is not such a good idea for at least two reasons:
Every image is an additional browser request - too many requests can clutter the initial page display
Additional images are loaded only on request (when you move your mouse over the link, click it etc.) which will produce an ugly flickering effect in time the requested image is actually loaded
Therefore use CSS sprites to eliminate both of these problems.
Try to wrap your URLs with quotes,
**stylesheet code**
#aCollection
{
background-image: url('images/collection.jpg');
}
#aCollection:hover
{
background-image: url('images/collection_hover.jpg');
}
#aCollection:active
{
background-image: url('images/collection_active.jpg');
}