Community Forums › Forums › Archived Forums › Design Tips and Tricks › Agency Pro: How to use home-middle hover effect?
Tagged: agency pro hover effects
- This topic has 3 replies, 2 voices, and was last updated 8 years, 7 months ago by paaljoachim.
-
AuthorPosts
-
August 16, 2015 at 12:52 pm #162551paaljoachimMember
Hi
I am trying to copy the effect from Agency Pro. The home-middle section has a nice hover effect where the opacity of the image goes to 0 and the content of the post is seen. I have located the home-middle featuredpost img hover css but I can not locate where the code for seeing the content, or placement of the thumbnails are.
Where is the code for seeing the content on hover and placing the post thumbnails?
http://my.studiopress.com/themes/agency/#demo-full
I am copying the effect over to a site I am working on right now using Altitude Pro.
Is it possible to use the same effect with a featured page instead of featured posts?Thanks.
ps
I am looking into creating an effect similar to:
http://www.heartbeatevolution.com/ Hover over Mikael and Brenda.
I design, instruct, help people to understand WordPress through my tutorials as well as create web sites and hold classes where i teach WordPress and Adobe software. easywebdesigntutorials.com
August 16, 2015 at 1:56 pm #162560Victor FontModeratorIt's on line 1347 is style.css.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 16, 2015 at 3:54 pm #162565paaljoachimMemberThank you Victor!
...and thank you for the link to your tutorial on inner secondary menu. I have not looked at it yet but look forward to doing so.
I figured out that the post featured thumbnails go to zero opacity it shows the post content behind it. As it is there all the time but not seen before the images in front become transparent. It is all adjusted with CSS. Very interesting!
Thanks again.
I will experiment with this.
I design, instruct, help people to understand WordPress through my tutorials as well as create web sites and hold classes where i teach WordPress and Adobe software. easywebdesigntutorials.com
August 17, 2015 at 6:52 am #162603paaljoachimMemberI figured it out and am working on a tutorial I will post within a few days on my site.
The result:
Three images in a row. Hover over the images and on a white background see gravatar image and post excerpt.
(Since I did not need meta tag such as post date or author name did not display it.)The basis of it follows:
NB! I added a few more images sizes to the functions.php file.
//* Add new image sizes
add_image_size( 'featured-page', 1140, 400, TRUE );
add_image_size( 'featured-page2', 330, 150, TRUE );
add_image_size( 'featured-page3', 380, 380, TRUE );
add_image_size( 'featured-page4', 290, 300, TRUE );Then installed and activated Regenerate Thumbnails so WordPress could pick up the new image sizes.
I made a new post category covering three posts called methods.
Went to the three posts I was going to use went to screen options and selected to click Excerpt. Added a text within the excerpt box below the content creation area.In the Genesis - Post widget
Category: Methods
Number of Posts to Show: 3
Show Author Gravatar: small
Show featured image. I selected featured-page4 (290x300)
Show Post Title
Skipped (did not click Show Post Info)
Content Type: Show Excerpt.
Click - Save -CSS code placed into style.css
/********* Featured post widget ********/ /* The full featured post 4 section */ #featured-post-4 .widget-wrap { margin: 0 auto; width: 80%; } /* The image */ #featured-post-4 img.entry-image { position: absolute; border: 10px solid #fff; } /* Entry content */ #featured-post-4 .entry { max-height: 320px; max-width: 310px; float: left; padding: 0 20px 0 0; margin: 20px; height: 320px; /* Covers area behind image */ width: 320px; /* Covers area behind image */ background: white; } #featured-post-4 .entry-title a { color: #fff; font-size: 22px; padding-left: 25px; font-weight: bold; font-family: 'Dosis', sans-serif; } /* Featured post widget more link */ #featured-post-4 .more-link { color: #f89a16; font-weight: bold; } #featured-post-4 .entry-header::after { content: ""; display: block; margin: 0 auto 60px; padding-bottom: 30px; width: 25%; } /* post date and author name */ #featured-post-4 .entry-meta { color: #fff; font-size: 16px; padding-top: 15px; display: none; /* Does not display post date and author name */ } /* post content */ #featured-post-4 .entry-content { max-width: 300px; max-height: 320px; float: left; text-align: left; margin: -70px 0 0 50px; } #front-page-3 img:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=15); -moz-opacity: 0.15; -khtml-opacity: 0.15; opacity: 0.15; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } /********* END Featured post widget test ********/
I design, instruct, help people to understand WordPress through my tutorials as well as create web sites and hold classes where i teach WordPress and Adobe software. easywebdesigntutorials.com
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.