Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 25, 2015 at 2:03 am #401823
    Apollo87

    Hi, I’ve been hard at work trying to create a vignette effect over the Masonry blog layout instead of the default overlay.

    I found that I can use the following styling of the background property to create the vignette:
    background:
    radial-gradient(transparent, black),

    This is the CSS I am currently using to style the Masonry blog:
    ****************
    .av-masonry-entry .av-inner-masonry:hover:before {
    background: rgba(0, 181, 241, 0.7);
    }
    .av-masonry-date{ display: none !important;
    }
    .av-masonry-entry .av-inner-masonry-content {
    background:transparent !important;
    text-align: center;
    }
    .av-masonry-entry .avia-arrow { display: none;
    }
    .av-masonry-entry .av-masonry-entry-title {
    background: transparent;
    padding: 10px;
    margin-bottom: 30%;
    font-weight: bold;
    font-size: 24px;
    color: #ffffff !important;
    }
    .avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
    -webkit-animation: none; /* Safari 4+ */
    -moz-animation: none; /* Fx 5+ */
    animation: none; /* IE 10+ */
    }
    .avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    opacity: 1!important;
    }
    ****************

    I also noticed that often, the above CSS creates errors in the rendering of the images within the Masonry Blog. Am I doing something incorrectly, or is this just too much customization?

    Lastly, I was also wondering how I could target specific color containers and apply the same vignette effect to the parallax image inside it. For example, on my homepage at http://www.thejetcoaster.com, I would like to try this with the image inside the color section under the “What is The Jet Coaster” section.

    Thank you so much in advance!

    • This topic was modified 9 years, 10 months ago by Apollo87.
    February 26, 2015 at 6:43 am #402468
    Ismael

    Hey Apollo87!

    Thank you for using Enfold.

    Please provide a screenshot of the modification that you want. If you want a transparent background on top of the masonry featured image, add something like this to the Quick CSS field:

    .av-masonry-entry .av-inner-masonry:before {
content: '';
background: rgba(0, 181, 241, 0.7);
width: 100%;
height: 100%;
display: block;
z-index: 1000;
position: relative;
}

    Regards,
    Ismael

    March 4, 2015 at 3:57 am #405539
    Apollo87

    Hi, thank you so much. I’ve really been struggling with this, and the following spaghetti is the best I could come up with so far:

    ******************

    #top #wrap_all .custom-color-heading .av-special-heading-tag {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px #000000; }

    .av-masonry-entry .av-inner-masonry:hover:before {
    background: rgba(0, 181, 241, 0.7);
    }

    .av-masonry-date{ display: none !important;
    }

    .av-masonry-entry .av-inner-masonry-content {
    background:transparent !important;
    text-align: center;
    }

    .av-masonry-entry .avia-arrow { display: none;
    }

    .av-masonry-entry .av-masonry-entry-title {
    background: transparent;
    padding: 10px;
    margin-bottom: 20%;
    font-weight: bold;
    font-size: 30px;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px #000000;
    }

    .avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
    -webkit-animation: none; /* Safari 4+ */
    -moz-animation: none; /* Fx 5+ */
    animation: none; /* IE 10+ */
    }

    .avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    opacity: 1!important;
    }

    /* UNUSED
    .av-masonry-entry:before {
    content: attr(title);
    background: radial-gradient(transparent, black);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    line-height: 180px;
    opacity: 0;
    font-weight: bold;
    font-size: 24px;
    color:#ffffff !important;
    }

    .av-masonry-entry:hover:before {
    opacity: 1;
    }

    .av-masonry-entry:before{
    transition: all linear 0.2s;
    }
    */
    **************

    The EXACT effect I want to replicate is like the masonry on this page:
    http://stophavingaboringlife.com/cats/travel-blog/

    I feel like I am pretty close, but its taking up most of my mental energy and time to figure out how to make the content display just like on that page.

    Specifically what I would like to emulate is:
    – the vignette over the content box, and another deeper vignette on hover
    – the styling of the big title on the big featured post content box on the left
    – Having the author displayed under the title
    – upon hover, the title and author text slides upwards to reveal an excerpt

    Please have a look at my page, and you’ll see that I have three widget areas for featured content. I would also like to apply the same styling as described above on those as well. I can’t figure out how to have the title/author/excerpt display on those just like in the blog masonry element.

    Honestly, thank you so very much for your help. You guys are seriously amazing. If you are ever in Tokyo, beers are on me:)

    • This reply was modified 9 years, 9 months ago by Apollo87.
    March 5, 2015 at 4:38 am #406216
    Andy

    Hi!

    I can’t see any images where you could add this effect in “What is the jet coaster?”.

    The ones I see are way to small, aren’t they? Which images do you mean exactly? please use screenshots (imgur.com).

    I think you could add this line into the brackets of Ismaels code:

    box-shadow: 0 0 150px 5px #000 inset;

    but for the other effects I think you would need to hire a freelancer for this. It would require a heavy customization of the theme and is out of our support scope.

    Cheers!
    Andy

    March 5, 2015 at 4:42 am #406218
    Ismael

    Hey!

    EDIT: I’m a bit late. Yes, Andy’s correct but you can try the code below. It’s not the same exact effect but it will get you closer.

    Please remove the css codes, replace it with this:

    .responsive.html_stretched .av-masonry-col-flexible .av-masonry-entry {
background: #000000;
}

.responsive.html_stretched .av-masonry-col-flexible .av-masonry-entry:before {
content: '';
-moz-box-shadow: 0 0 150px 5px #000 inset;
-ms-box-shadow: 0 0 150px 5px #000 inset;
-o-box-shadow: 0 0 150px 7px #000 inset;
-webkit-box-shadow: 0 0 100px 8px #000 inset;
box-shadow: 0 0 150px 5px #000 inset;
float: left;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
}

figure.av-inner-masonry.main_color {
background: #000000;
}

.av-inner-masonry-content {
position: absolute;
background: transparent;
bottom: -100% !important;
}

.responsive.html_stretched .av-masonry-col-flexible .av-masonry-entry:hover .av-inner-masonry-content {
bottom: 0 !important;
}

.avia_desktop .av-hover-overlay-active .av-masonry-entry .av-masonry-image-container {
opacity: 1 !important;
}

.avia_desktop .av-hover-overlay-active .av-masonry-entry:hover .av-masonry-image-container {
opacity: 0.5 !important;
}

    Cheers!
    Ismael

    March 13, 2015 at 8:45 am #410871
    Apollo87

    Thank you for the reply!

    Although the above code didnt quite work for what I was trying to achieve, I eventually managed to figure it out. However some of the code may be redundant. The following works, so I will leave it here for anyone interested in the effect I have achieved on http://www.thejetcoaster.com but if anyone could tell me what is unnecessary that would be even better. Once again, thank you guys so much.

    .av-masonry-entry .av-inner-masonry:hover:before {
    background: rgba(0, 181, 241, 0.1);
}

.avia_desktop .av-hover-overlay-active .av-masonry-image-container {
opacity: 1;
box-shadow: 0 0 150px 5px #000 inset;
}

.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
-webkit-transform: none;
-moz-transform: none;
transform: none;
opacity: .9!important;
box-shadow: 0 0 150px 5px #000 inset;
 }

.av-masonry-date{ display: none !important;
}
.av-masonry-entry .av-inner-masonry-content { 
background:transparent !important;
  text-align: center; 
 }
.av-masonry-entry .avia-arrow { display: none; 
}
.av-masonry-entry .av-masonry-entry-title {
background: transparent;
padding: 10px;
margin-bottom: 20%;
font-weight: bold;
  font-size: 30px;
  color: #ffffff !important;
 text-shadow: 2px 2px 4px #000000; }

.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: none; /* Safari 4+ */
-moz-animation:    none; /* Fx 5+ */
animation:         none; /* IE 10+ */
}

/*
.av-masonry-entry:before {
    content: attr(title);
    background: radial-gradient(transparent, black);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    line-height: 180px;
    opacity: 0;
    font-weight: bold;
    font-size: 24px;
    color:#ffffff !important;
}

.av-masonry-entry:hover:before {
    opacity: 1;
}

.av-masonry-entry:before{
    transition: all linear 0.2s;
}
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to create vignette inside Masonry Blog and Parallax images in Color Sections’ is closed to new replies.