nickbarr
-
Posts
32 -
Joined
-
Last visited
Reputation Activity
-
nickbarr reacted to JessicaM in Site speed, image heavy
@nickbarr you're right, the images take a looong time to load. Once the page loaded, it operated fine, but most people won't hang around for something to load. People have a pretty short attention span these days. You might also think about including a hero section at the top that quickly tells people who you are and what you do. There's nothing that explains you're a photographer other than the tab. People could just as easily land on your site and think you do advertising. Just needs to be a bit more clear. An About page would be helpful too.
It's a bit confusing as to what action people should take on your site. Do you want them to purchase your images? Hire you for a session? You have really nice images, so I would just tweak a few things on the site to make it more clear so that people stay there longer.
-
nickbarr reacted to tuanphan in Image overlay hover in 7.1 Masonry Grid
You can use some code like this to Website > Website Tools > Custom CSS
a.gallery-masonry-image-link[href="/ssense-stories-2024"]:hover img { content: url(https://cdn.pixabay.com/photo/2023/08/11/04/51/fireworks-8182800_1280.jpg); } a.gallery-masonry-image-link[href="/glossier-ultralip-generation-g"]:hover img { content: url(https://cdn.pixabay.com/photo/2023/11/20/13/21/mountain-8401084_1280.png); } a.gallery-masonry-image-link[href="/ssense-gift-guide-2023"]:hover img { content: url(https://cdn.pixabay.com/photo/2023/09/11/16/44/roses-8247285_1280.jpg); }
-
nickbarr reacted to tuanphan in Image overlay hover in 7.1 Masonry Grid
You mean
You have a Masonry Grid with 30+ images
You want: when users hover on each image >> change it to another image?
If yes, it is possible, you can share link to page where you use Masonry, I will give some code to achieve this
-
nickbarr reacted to tuanphan in Mobile images not displaying full width
Add this to Design > Custom CSS
/* Mobile image fullwidth */ @media screen and (max-width:767px) { .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } }