Post by dani888 » Sun Sep 16, 2018 3:13 pm

Hello
Can be added three images after banner
For the theme http://www.spearthemes.com/oc-light/
Or default theme opencart 3.0.2.0
I understand that it is difficult to add images to themes.
There may be an easier way to add images.
It's right to add html content modules or it's not a safe way.
The 3 images also have a hover effect.
Thank you

Attachments

three images.jpg

three images.jpg (159.21 KiB) Viewed 769 times


Active Member

Posts

Joined
Wed Feb 14, 2018 1:47 am

User avatar
Expert Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm
Location - România

Post by dani888 » Sun Sep 16, 2018 4:56 pm

Hello
This module is good or I need to install another module
Thank you

Attachments

html image.jpg

html image.jpg (15 KiB) Viewed 745 times


Active Member

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by xxvirusxx » Sun Sep 16, 2018 5:14 pm

Yes.

And as an example/demo you can add this:

Code: Select all

<div class="beffect">
  <a href="#"><img src="you_image_location.jpg"></a>
  </div>
and on you theme css

Code: Select all

.beffect{
    position: relative;
    overflow: hidden;
}
.beffect img {
    max-width: 100%;
    transition: all 0.5s;
}
.beffect a:hover::before {
    border: 0 solid rgba(255, 255, 255, 0.7);
}
.beffect a::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    border: 50px solid rgba(255, 255, 255, 0);
    top: 0;
    left: 0;
    transition: all 0.5s ease-in-out;
}
.beffect a:hover::after {
    transform: scale(0.5);
    opacity: 0;
    transition-delay: 0.1s;
}
.beffect a::after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: 0.5;
    border: 30px solid #fff;
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
    transition-delay: 0s;
}

Upgrade Service | OC 2.3.0.2 PHP 8 | My Custom OC 3.0.3.8 | Buy me a beer


User avatar
Expert Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm
Location - România

Post by dani888 » Sun Sep 16, 2018 5:26 pm

Ok
Thank you

Active Member

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by dani888 » Sun Sep 16, 2018 7:12 pm

I made the changes but maybe I did not do something right
When I insert the image it works from the module.
When I write code it does not appear exactly what I write
source image C:\xampp\htdocs\opencart\image\catalog\demo\canon_eos_5d_2.jpg
<img style="width: 408.525px; height: 375.1px;" src="http://localhost/opencart/image/catalog ... s_5d_2.jpg">
Thank you

Attachments

my site.jpg

my site.jpg (68.73 KiB) Viewed 709 times

html module.jpg

html module.jpg (103.85 KiB) Viewed 709 times


Active Member

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by khnaz35 » Sun Sep 16, 2018 7:41 pm

dani888 wrote:
Sun Sep 16, 2018 7:12 pm
I made the changes but maybe I did not do something right
When I insert the image it works from the module.
When I write code it does not appear exactly what I write
source image C:\xampp\htdocs\opencart\image\catalog\demo\canon_eos_5d_2.jpg
<img style="width: 408.525px; height: 375.1px;" src="http://localhost/opencart/image/catalog ... s_5d_2.jpg">
Thank you
did you update your theme file first ?
you can add <style> </style> direct to your page as well
Last edited by khnaz35 on Sun Sep 16, 2018 7:56 pm, edited 1 time in total.

Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by dani888 » Sun Sep 16, 2018 7:56 pm

I gave refresh

Attachments

update1.jpg

update1.jpg (39.14 KiB) Viewed 696 times

modifications.jpg

modifications.jpg (45.26 KiB) Viewed 696 times


Active Member

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by khnaz35 » Sun Sep 16, 2018 7:57 pm

dani888 wrote:
Sun Sep 16, 2018 7:56 pm
I gave refresh
Does it help?

Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by dani888 » Sun Sep 16, 2018 8:05 pm

Not the same result

Active Member

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by xxvirusxx » Sun Sep 16, 2018 8:08 pm

Paste that code using code view </> , and don`t paste as text.....
After you pasted the code, press again on code view, then save

Upgrade Service | OC 2.3.0.2 PHP 8 | My Custom OC 3.0.3.8 | Buy me a beer


User avatar
Expert Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm
Location - România

Post by khnaz35 » Sun Sep 16, 2018 8:18 pm

xxvirusxx wrote:
Sun Sep 16, 2018 8:08 pm
Paste that code using code view </> , and don`t paste as text.....
After you pasted the code, press again on code view, then save
its look like he didn't update his CSS sheet and just trying to achieve it direct without mentioning div class

Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by dani888 » Sun Sep 16, 2018 8:36 pm

Now it works
I added the first picture

Active Member

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by khnaz35 » Sun Sep 16, 2018 8:46 pm

dani888 wrote:
Sun Sep 16, 2018 8:36 pm
Now it works
I added the first picture
Great so don't forget to mention the step here as well in case if some have same problem & Mark your post as resolved

Thanks

Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by IP_CAM » Mon Sep 17, 2018 2:21 am

Great so don't forget to mention the step here

Well, anyone should know, that HTML Code needs to be entered in SOURCE MODE,
but sure not in WYSIWYG (What you see is what you get) Mode, to make such work. :'(
It works this way since 'MS FrontPage 95' and similar WYSIWYG HTML Editors exist,
so there is nothing really new about this... ;)
Still, I usually mention this, if I make such a Posting, just to make sure, since more
and more OC Newbies never played around with (html) Code before. ::)
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by paulfeakins » Mon Sep 17, 2018 5:59 pm

dani888 wrote:
Sun Sep 16, 2018 7:12 pm
I did not do something right
dani888 wrote:
Sun Sep 16, 2018 7:12 pm
C:\
Correct, you used Windows :crazy:

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Guru Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom
Who is online

Users browsing this forum: moreduff and 270 guests