Return to previous page

Remove the two icons from blog miniatures

This topic has 6 replies, 3 voices, and was last updated 6 years ago ago by Rose Tyler

designerobot

Participant

June 5, 2019 at 03:50
Hello,

To remove the two icons (namely zoom and link) and to remove the fade effect on the pic at rollover, in order to have a standard clickable picture, I used this code for the Portfolio page (see Link 1) in style.css:

.portfolio-image .zoom { display: none; }

It works perfectly.

To have the same effect on the Blog page (see Link 2) I used a very similar code in style.css:

.wp-picture .zoom { display: none; }

But in this case it doesn’t work. It removes the two icons (zoom and link) and removes the fade effect too, but after it removes the link at all. Therefore now it isn’t a standard clickable picture as I wanted. How to correct the code?
Please, contact administrator
for this information.
#214986 Copied Theme version: 5.0.1
5 Answers
Rose Tyler

Support staff

June 5, 2019 at 08:00
Hello,

Please try this code:

.wp-picture .btn_group a:last-child { height: 350px; width: 100%; } .wp-picture .btn_group, .wp-picture:hover .zoom { opacity: 0; } .wp-picture .btn_group { top: 20px; height: 100%; } .wp-picture .btn_group a:first-child { display: none !important; }

Regards
#215004 Copied
designerobot

Participant

June 5, 2019 at 11:37

Hello, thank you!
It works but not perfectly, if you go to the site and look, you will notice that the pointer becomes hand only at the center of the image, but not on the 10-20 pixels in the desktop version/almost half image in the mobile (on each image it is different, in the corners the phenomenon occurs more).

1) How to fix those miniatures of the blog to work on the entire surface as already happens in the portfolio?

Two more questions if I can:

2) Now both the blog page and the portfolio page have 3 columns in the desktop version. But then they become 1 column in the mobile version. How do I maintain 3 columns even in the mobile?

3) As you can see, the miniatures (both in the blog and in the portfolio) have different dimensions and proportions. This is not a nice effect on the page.
How can I set the display of thumbnails (both in the blog and in the portfolio) of the same size and with the same proportions (for example with a 3:2 ratio)?

#215020 Copied

Olga Barlow

Participant

June 6, 2019 at 10:41

Hello,

1) We removed the zoom blog and added link for the image in woopress-child/content-grid.php. Check if this is what you need.
2) By customization of classes in woopress-child/content-grid.php and woopress-child/content-portfolio.php Check the changes we made.
3) Register the necessary size in child theme functions.php http://prntscr.com/nyb8d5 and use it for the blog grid http://prntscr.com/nyb8sb
Portfolio image size you can set in Theme Options > Portfolio > Project Images Width & Project Images Height & Image Cropping

Regards

#215108 Copied

designerobot

Participant

June 6, 2019 at 13:12

All is perfect. Many thanks!

#215130 Copied

Rose Tyler

Support staff

June 6, 2019 at 13:36

Hello,

You’re welcome!

Regards

#215133 Copied
Viewing 6 results - 1 through 6 (of 6 total)