Docs

[pelowi]

Hi,

I just found out how to change the width of the featured image to fullwidth with the following code to “Edit Global Java Script”:

(function($) {
$(‘.single .entry-featured’).insertAfter(‘header.masthead’);
})(jQuery);

Perfect, the image is now fullwidth.

Now I want to add an white image to the bottom of the featured image, so it looks like, the image is cropped in a bow… I´m using Visual composer an want to add an effect of VC extensions to all featured images…

How can I do it?

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[pelowi]

This reply has been marked as private.

[Lely]

Hi There,

Please add this CSS on Appearance > Customize > Custom > Edit Global CSS:

.single-post .entry-thumb svg {
    position: absolute;
    bottom: 0;
    left: 0;
    bottom: 0;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}
.single-post .entry-thumb {
    position: relative;
}

Then also update JS script to this:

(function($) {
   $('.single .entry-featured').insertAfter('header.masthead');
   $('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class=" " width="100%" height="100" fill="#ffffff" viewBox="0 0 100 100" preserveAspectRatio="none" style="height: 100px; width: 100%;"><path fill="#ffffff" d="M0 0 C 50 100 80 100 100 0 Z"></path></svg>').insertAfter('.single .entry-featured img');
})(jQuery); 

The script will add the SVG curve image below the featured image. Then the CSS will position it correctly.

Hope this helps.

[pelowi]

AWESOME… AMAZING… I´m really impressed.
Where can I learn something like that? That´s great!

I don´t understand why, but it works…

Special Thanks to Lely – U made my day…..

[Friech]

Hi There,

We’re delighted to assist you with this. You can start learning CSS from here.

Cheers!

[Author]

Posts