How can I get a mouseover hand on images that have srcset, fancybox, and lazyload?

HTML & CSS
1

I am trying to display images that have srcset, lazyload and fancybox functions. I have everything working, except I cannot figure out how to get the mouseover hand effect working. Being greedy; what I would really like is a nice magnifying glass or some other effect that emphasizes that the images can be enlarged. Thank you in advance. See page here: https://mrpitbull.com/

I’ve tried to add various css functions to no avail. For some reason the images are not being perceived as an image.

unbelievable remyline pitbull

2

Have you tried add the cursor property on the particular anchors, or on some parent that covers the anchor?

E.g. on the a as the default or only at a defined state, a:hover:

a:focus,
a:hover {
  cursor: zoom-in;
}
3

Thank you for your help. I have tried, yet I’m not really sure what I am doing. And for this reason, nothing has worked. img is the parent to the code in question. In my css it is already defined (I believe). I tried to paste here a copy of the code in question, yet am not sure how to accomplish that.

4

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

5

Doesn’t look like it is:

.image-hover-zoom img {
	transition: all 0.20s linear 0s;
	-o-transition: all 0.20s linear 0s;
	-ms-transition: all 0.20s linear 0s;
	-moz-transition: all 0.20s linear 0s;
	-webkit-transition: all 0.20s linear 0s;

	cursor: zoom-in; /* test adding this */
}
1 Like
6

Try this:

img[title="CLICK TO ENLARGE"]{cursor:zoom-in}

[edit]

oops beaten by Erik :slight_smile:

1 Like
7

Would have been better if I was slower so I could have noticed your much better suggestion and abstained. :slight_smile:

Didn’t think of the option to generally select those given a specific title attribute. :blush:

1 Like
8 
data-sizes="auto"
   data-srcset="dog-pictures/blue-remyline1920.jpg 1920w, dog-pictures/blue-remyline1366.jpg 1366w, dog-pictures/blue-remyline940.jpg 940w, dog-pictures/blue-remyline640.jpg 640w" title="CLICK TO ENLARGE" data-fancybox data-caption="Imagine coming home and being greeted like this everyday!"
	img data-src="dog-pictures/blue-remyline940.jpg" alt="unbelievable remyline pitbull" width="940" height="529" class="lazyload" />```
1 Like
9

Woohoo! That worked! Appreciated. Any way to have a larger cursor?

1 Like
10

Pasted into my css and it didn’t do anything, unfortunately. Thanks.

1 Like
11

Create your own image and then supply it as a url to the cursor property. You will need an image in the proper format so have a look here for how to do it.

12

Thank you, I will give it a good look.

13

I have an ico I would like to use, yet have not had success getting it to work. Using the code above, how could I add the file (img/zoom-in-icon.ico) to it?

14 

img[title="CLICK TO ENLARGE"]{cursor:url('img/zoom-in-icon.ico)', default;}

Remember the path to the image will be relative to the css file that contains the above rule. The above would assume that the img folder is inside the current folder that contains the css.

15

For whatever reason, that code is destroying the entire top half of the webpage. Previous to trying the above I tried numerous strings, none of which messed up the page. They just simply didn’t work. I did put the “img” folder inside the css folder, if I understand what you were saying about the path. Of course I could be mistaken… What is new in the above code that I hadn’t tried is the finish with the “default”. I do note a potential error in the above code with the last single quote.

16

And that was it. Moved that last ’ quote and it is working like a champ!!!

I would like to bother you for one more small thing: I would prefer a path where the “img” folder is not inside the css folder, but not sure how to code that.

17

Some examples how to code where the image is located relative the CCS file itself:

url("img") - image is here, adjacent the CSS file,

url("folder/img") -image is in a folder adjacent  the CSS file.

url("./img") - image is in the same folder, indicated as up-from and in-to this same directory.

url("../img") - image is located a step up in the directory stack, adjacent current folder.

url("../folder/img") - image is in a folder a step up in the directory stack, adjacent current folder.
1 Like
18

Sorry typed it in a rush without checking :frowning:

19

Appreciated.

20

No worries, thank you for your kind assistance.

2 Likes