Community Forums › Forums › Archived Forums › Design Tips and Tricks › entry image is not overlayed on the widget in parallax
Tagged: parallax
- This topic has 1 reply, 2 voices, and was last updated 10 years ago by Susan.
-
AuthorPosts
-
February 20, 2014 at 10:43 am #91419CHARLIEGOLFMember
Hello, I tried to put some featured pages in section-2 of parallax theme
like in agency pro I added a new image size//* Add new image sizes add_image_size( 'home-section-2', 380, 380, TRUE );
I added a class called "home-squared" in markup of section-2 in front-page.php
genesis_widget_area( 'home-section-2', array(
'before' => '<div class="home-even home-squared home-section-2 widget-area"><div class="wrap">',
'after' => '</div></div>',
) );And I added this css at the end.
.parallax-home .content .home-squared .widget { width: 33.3333%; float: left; margin-bottom: 0; background: #333; color: #fff; min-height: 380px; } .home-squared .featured-content .entry { background: transparent; } .home-squared .featured-content .entry-title a { color: #fff; } .home-squared .featured-content img.entry-image { left: 0; position: absolute; } .home-squared .featured-content img:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); -moz-opacity: 0.1; -khtml-opacity: 0.1; opacity: 0.1; } @media only screen and (max-width: 1180px) { .parallax-home .content .home-squared .widget { min-height: 320px; } } @media only screen and (max-width: 1023px) { .parallax-home .content .home-squared .widget { min-height: 380px; width: 50%; } } @media only screen and (max-width: 800px) { .parallax-home .content .home-squared .widget { min-height: 320px; } } @media only screen and (max-width: 680px) { .parallax-home .content .home-squared .widget { min-height: 380px; width: 100%; } } @media only screen and (max-width: 480px) { .home-squared .featured-content img.entry-image { position: relative; } .home-squared .featured-content img:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; } }
I choose 2 widgets "featured pages" and I put in the section-2 widget.
It's everything ok but the overlayed images (img.entry-image) is not
allined to the top of the widget but at the beginning of the page. I have
to declare some other css rule but I don't know exactly. Thanks a lot.
CarlettoURL
http://www.vigilfuocoerba.it/immagini/problema.JPGChild Theme
http://www.vigilfuocoerba.it
ParallaxApril 15, 2014 at 9:08 am #100440SusanModeratorAs you posted this a while ago, I hope you got your issue resolved. If not, please let me know, and I will take a look (or escalate if I cannot help).
If it is resolved, please mark it resolved, so that the thread can be closed.
Thanks!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.