What if my two images (mouseover) are different sizes?

  • kearly

    (@kearly)


    5 years, 12 months ago

    Hi, I’m trying to do a mouseover image that is larger than the image it is replacing. In the past I’ve used very simple hover plugins which had options to over-ride the size settings in case the images were different sizes. But to my dismay I can’t seem to find an option to do this with this particular plugin, and sadly it’s a bit of a dealbreaker. It only seems to allow for one static image size. If the mouseover image exceeds those values, it is crunched down to fit them.

    Is there maybe something I can add in the custom CSS box to make this image size over-ride happen? The first image is 200×200, the second image is 800×250.

    Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author biplob018

    (@biplob018)

    5 years, 11 months ago

    Normally for responsite design i give manually size for each image. You can set image size like image width and height form shortcode edit page.

    If you like to use separate image size i suggest to use separately. Like 2 shorcode and put separately.

    Thread Starter kearly

    (@kearly)

    5 years, 11 months ago

    Hmmm.

    This almost works but not quite.

    This is what I did.

    I made two shortcodes. The first has Image A (200×200) and the image settings are set at 200×200. The mouseover image is left blank, so when you mouseover on this image it disappears and is replaced by blank space. The shortcode is called [iheu_ultimate_oxi id=”8″]

    The second has no image for the default (resulting in blank space), and the mouseover image is my 800×250 image. The image settings are at 800×250. The result is a seemingly empty space, but when you mouseover the 800×250 image appears. The shortcode is called [iheu_ultimate_oxi id=”10″]

    I took both shortcodes and put them into my post, as such:

    [iheu_ultimate_oxi id=”8″][iheu_ultimate_oxi id=”10″]

    This does work as intended with one catch, the images are not overlayed, but sit on top of each other. So in other words, I have to move my mouse down about an inch or two for the 2nd image to appear, which essentially defeats the purpose.

    Here’s how it looks currently: http://fapservice.com/__trashed/

    If somehow I could get these two shortcodes to exist within the same space, instead of in two separate spaces, it would work perfectly.

    I tried experimenting with codes like [iheu_ultimate_oxi id=”8″ id=”10″] with no success. Where did I go wrong?

    • This reply was modified 5 years, 11 months ago by kearly.
    • This reply was modified 5 years, 11 months ago by kearly.
    Thread Starter kearly

    (@kearly)

    5 years, 11 months ago

    Bump. Sorry I just noticed this was marked as resolved, but that is not quite the case.

    Plugin Author biplob018

    (@biplob018)

    5 years, 11 months ago

    You want to put shortcode into custom html or if you using any page builder so put shortcode into 2 column. So you can use it perfectly as you like also reset or resize of per shortcode.

    If you can add html so the code will

    <div class=”image-ultimate-row”>
    <div class=”image-ultimate-row-custom-1″>
    [iheu_ultimate_oxi id=”8″]
    </div>
    <div class=”image-ultimate-row-custom-2″>
    [iheu_ultimate_oxi id=”10″]
    </div>
    </div>

    I also give you custom CSS which you add any one of those shortcode for divide them each others. Then you can customize.

    .image-ultimate-row-custom-1{
    width:25%;
    float: left;
    }
    .image-ultimate-row-custom-2{
    width:75%;
    float: left;
    }
    @media only screen and (min-width: 601px) and (max-width: 992px) {
    .image-ultimate-row-custom-1{
    width:25%;
    }
    .image-ultimate-row-custom-2{
    width:75%;
    }
    }
    @media only screen and (max-width: 600px) {
    .image-ultimate-row-custom-1{
    width:100%;
    }
    .image-ultimate-row-custom-2{
    width:100%;
    }
    }

    Here i give 1/4 and 3/4 separately of full space You can customize as you want. If not kindly reply this email I can give you with modified data.

    Thread Starter kearly

    (@kearly)

    5 years, 11 months ago

    Thanks for your time and effort, though this still isn’t exactly what I wanted. The images are now side by side instead of one on top of the other. I was really hoping they could somehow occupy the same space.

    If that’s not possible, then I will make due with what you have shown me. Thank you.

    • This reply was modified 5 years, 11 months ago by kearly.
    • This reply was modified 5 years, 11 months ago by kearly.
    • This reply was modified 5 years, 11 months ago by kearly.
    • This reply was modified 5 years, 11 months ago by kearly.
    Plugin Author biplob018

    (@biplob018)

    5 years, 11 months ago

    I check your site its working will you please tell me how you want

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘What if my two images (mouseover) are different sizes?’ is closed to new replies.