Setting a CSS variable to refer to link in a class, then using that variable as a url in content: url()

Question

I am trying to customize the CSS of a course website in which I cannot use javascript or change the HTML - I can only upload custom CSS files.

I have made it so, in a list of content links to .jpg files, when I hover over the list item, the corresponding image appears underneath. I have got the hover function to work but it requires me to make a new class selector for every file in the list.

The code that shows the image on hover is:

.itemlink:hover:after {
  content: url([image url]);
  display: block;
  position: relative;
  zoom: 50%;
}

The image files are linked in this way.

Is there a way for me to set a variable called "--assetPath" that refers to whatever link is present in the href for the "link-div-head" class in the attached image, so I can place that variable as the content url for the hover effect?

Alternatively, could I set it up so the url is a variable that is set to return the url of an image file if given the file name (ie. the text in the "link-text itemtext" class below the highlighted part in the attached image)?

Basically, is there a way for me to set this up so that the image url is automatically the image that I am hovering on, so I don't have to link each individual file.

I'm fairly new to css so I hope this makes sense. I can provide extra clarification if necessary. Thanks.

[Try `content:attr('href');`.](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) — deEr., May 11 '18 at 15:21
if you have access to html, you could try using css data attributes ( it would look like `content:url(attr(href))` ) — Neil, May 11 '18 at 15:24
@AjAX. I think so? In the source code of my page, "class=itemLink" appears just below the link I'd like to retrieve. — DR2016, May 11 '18 at 15:25
It is actually a mix of @Neil and me I guess. `content:url(attr(href));` — deEr., May 11 '18 at 15:28
i just corrected since op could not change html,href should do the job yes :) — Neil, May 11 '18 at 15:28
neither the `content: attr('href')` nor `content:url(attr(href))` unfortunately. — DR2016, May 11 '18 at 15:33
visual studio puts a red underline on the second closed bracket after `(attr(href))`, saying it is expecting a semi-colon — DR2016, May 11 '18 at 15:36
@AjAX. I changed it to `content: "("attr(href)")";` and it worked, but it displays the image url string instead of the actual image — DR2016, May 11 '18 at 15:39
[From here try `content:url() attr(href);`. Or something](https://stackoverflow.com/questions/9244197/css-content-attr-and-url-in-the-same-sentence) — deEr., May 11 '18 at 15:40
didn't work.. could I set a variable for `content: "(attr(href)")"` then use that variable in another instance of `content:url()` ? — DR2016, May 11 '18 at 15:48
[It looks like it is in the `specs`. But — not — implemented yet.](https://stackoverflow.com/a/26968370/2569323) — deEr., May 11 '18 at 15:53

Setting a CSS variable to refer to link in a class, then using that variable as a url in content: url()

0 Answers0