Is it possible to add links to images in css?

Question

I can't change the html, so is it possible to do something like (a href="") in css?

I saw that I can use jQuery to do it, but there aren't any specific classes for each slide, just a general class:

<div class="slick-slider draggable">
    <div class="slick-slider">
        <figure class="slick-slide-inner"><img class="slick-slide-image" alt="PLANOS"></figure>
    </div>
    <div class="slick-slider">...</div>
    <div class="slick-slider">...</div>
    <div class="slick-slider">...</div>
    <div class="slick-slider">...</div>
    <div class="slick-slider">...</div>
    <div class="slick-slider">...</div>
</div>

Is it possible to do something like this:

figure.slick-slide-inner[alt="PLANOS"]{
    /*and command to add link*/
}

It looks to be the exact same problem to me. How does your problem differ? — Turnip, Jul 24 '19 at 14:03
javascript and jQuery can do this for sure. I don't think css can. — Mark Baijens, Jul 24 '19 at 14:04
css is a styling language: it can't alter the structure of the page — Fabrizio Calderan, Jul 24 '19 at 14:05
In that post the porpuse is to add a link to a image provided by css. My problem is the opposite I think, I have the image in the html, and wanted to know if is possible to add the link to another page trough css, since I can't change the html. — Chimelin, Jul 24 '19 at 14:06
@Chimelin Please describe clearly what you want to achieve. What is the source data and what is your desired end result? It's kinda unclear. From you commend i suspect you like to scrape (A part of) the html from a page you don't have access too and use this on another page? — Mark Baijens, Jul 24 '19 at 14:10

score 1 · Accepted Answer · answered Jul 24 '19 at 14:21

1

No, as everyone is saying you cannot do this with pure css.

As you have tagged jquery on this question I suppose you just want to get a solution.

You can do it with something like this:

$(function(){
    $(".slick-slide-image[alt='PLANOS']").wrap('<a href="https://www.example.com/"></a>');
});

Although, on the list of mad ideas that I've seen today, selecting things by their alt tag is at the top.

answered Jul 24 '19 at 14:21

rtpHarry

13,019
4
43
64

I'm a beginner, didn't even know I could use alt in css, but I don't see any other way of selecting them. Thank you, it was something like this that worked. – Chimelin Jul 24 '19 at 14:32
@Chimelin normally you would give your elements an unique ID which you can use. Because the alt text is just a hardcoded message which can contain random information and this text is optional and normally not used in any other way then explaining an image to blind people. Because the alt text of an image is used for text to speech. – mrdeadsven Jul 24 '19 at 14:37

score 0 · Answer 2 · answered Jul 24 '19 at 14:10

CSS is only to tell html how it should display. Except content you can not modify html at all using CSS.

I suggest you to write script in JQuery. If you know order of images and know links for them and order will not change you can always modify it.

Also if you know src value for images and its corresponding link, you can use JQuery again to redirect user based on that.

Hope it helps :)

Is it possible to add links to images in css?

2 Answers2