additional-class-number different

withamyn
2 Posts
withamyn posted this 02 April 2019

Hi!

Joomla themer
I want different size magnifying effects for different images within a page.
eg .:
1img.jpg = 2.5 zoom,
2.img.jpg = 2.8 zoom,
3.img.jpg = 3.3 zoom,
The images will be assigned a new class number every time I save, so I cannot write a unique css code for them.
Please help!

Hi! Joomla themer I want different size magnifying effects for different images within a page. eg .: 1img.jpg = 2.5 zoom, 2.img.jpg = 2.8 zoom, 3.img.jpg = 3.3 zoom, The images will be assigned a new class number every time I save, so I cannot write a unique css code for them. Please help!
Vote to pay developers attention to this features or issue.
2 Comments
Order By: Standard | Newest
gamebaisunwin
1 Posts
gamebaisunwin posted this 03 April 2019

cam on ban da chia se cho chung toi biet ve rat nhieu thong tin huu ích tai day nhe!

cam on ban da chia se cho chung toi biet ve rat nhieu thong tin huu ích tai day nhe!
withamyn
2 Posts
Is Solution
withamyn posted this 03 April 2019

Hi!
I found the solution:
Custom magnification is obtained with the alt attribute of the images:

img[alt*="zoom"]{
transition: transform 0.5s;
}

img[alt="zoom 2.5"]:hover {
transform: scale(2.5);
-webkit-transform: scale(2.5);
}

img[alt="zoom 2.8"]:hover {
transform: scale(2.8);
-webkit-transform: scale(2.8);
}

img[alt="zoom 3.3"]:hover {
transform: scale(3.3);
-webkit-transform: scale(3.3);
}

img[alt="zoom 4.0"]:hover {
transform: scale(4.0);
-webkit-transform: scale(4.0);
}

img[alt="zoom 5.0"]:hover {
transform: scale(5.0);
-webkit-transform: scale(5.0);
}

img[alt="zoom 6.7"]:hover {
transform: scale(6.7);
-webkit-transform: scale(6.7);
}

Hi! I found the solution: Custom magnification is obtained with the alt attribute of the images: img[alt*="zoom"]{ transition: transform 0.5s; } img[alt="zoom 2.5"]:hover { transform: scale(2.5); -webkit-transform: scale(2.5); } img[alt="zoom 2.8"]:hover { transform: scale(2.8); -webkit-transform: scale(2.8); } img[alt="zoom 3.3"]:hover { transform: scale(3.3); -webkit-transform: scale(3.3); } img[alt="zoom 4.0"]:hover { transform: scale(4.0); -webkit-transform: scale(4.0); } img[alt="zoom 5.0"]:hover { transform: scale(5.0); -webkit-transform: scale(5.0); } img[alt="zoom 6.7"]:hover { transform: scale(6.7); -webkit-transform: scale(6.7); }
You must log in or register to leave comments