collapse collapse

* User Info

 
 
Welcome, Guest. Please login or register.
Did you miss your activation email?

* Who's Online

  • Dot Guests: 99
  • Dot Hidden: 1
  • Dot Users: 1

There aren't any users online.

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • aegersz: o LOVE you guys - Simple Portal rocks !
    May 09, 2018, 05:18:59 AM
  • Chen Zhen: our apologies for the site being down.. please read server issues topic
    March 22, 2018, 05:32:38 AM
  • {OCS}MasterSeal: LOL PLEASE forget I just posted that. I found the answer in my own dang post back in 2015. lol sorry!
    July 04, 2017, 10:47:55 PM
  • {OCS}MasterSeal: I know this SB isnt' for support, but I just have a general question. Who would I contact to find out where SP stores its block info? Is it DB driven or files? I searched the site but came up with nothing. probably my fault any insight is appreciated.
    July 04, 2017, 10:43:36 PM
  • ♦ Ninja ZX-10RR ♦: Excuse me but what does Simpleportal have to deal with that?
    February 05, 2017, 08:21:14 PM
  • WhiteEagle: of course IMHO that site appears to be dead :(
    February 04, 2017, 01:08:05 PM
  • WhiteEagle: If I can get that, then I'll use it for that site...
    February 04, 2017, 01:07:35 PM
  • WhiteEagle: decided to not use SMF for any projects, unless I can get a copy of the premium version of the fanfiction archive plugin
    February 04, 2017, 01:06:54 PM
  • expertdecisions: cloudflare
    January 28, 2017, 08:01:47 AM
  • aegersz: SM release 2.0.13 !
    January 12, 2017, 06:00:13 AM
  • raffo: Tks Emanuele, even if I didn't understand the fix :D
    November 07, 2016, 02:01:20 AM
  • emanuele: [link]
    November 01, 2016, 12:43:50 PM
  • emanuele: raffo: the English support board is a good place. ;)
    November 01, 2016, 12:43:38 PM
  • raffo: Where can I find the fix for the shoutbox?
    November 01, 2016, 05:06:09 AM
  • {OCS}MasterSeal: To the SP team, I make a point to come here and thank you as much as possible for your work.  so again, THANK YOU!
    October 28, 2016, 10:38:05 AM
  • emanuele: That's indeed funny, the limit is present only in the patch and not the full install.
    October 22, 2016, 06:14:58 PM
  • phantomm: and from what I see only patch is broken, full install package is fine
    October 21, 2016, 03:44:44 PM
  • phantomm: they say it for over 3 weeks now..
    October 21, 2016, 03:43:52 PM
  • aegersz: SMF say that bug fix 2.0.13 is coming soon ...
    October 19, 2016, 06:46:12 PM

* Recent Posts

Installation errors? Mod incompatibilities? Upgrade problems? Make your way over to the Install and Upgrade Support board for all your solutions!

Author Topic: hover images in a block  (Read 7934 times)

0 Members and 1 Guest are viewing this topic.

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
hover images in a block
« on: April 13, 2016, 03:34:05 AM »
Hi what i am trying to do is have 3 or 4 images in a block like this site  but not sure if it can be coded for simple portal as i think it is from a wordpress site see example daiwa .com.au  around the news section.


would like to have  hover images the same with some info  then when images clicked on can go  to another pages with full info  of picture that has hover affect...  can this be done in simpleportal?

Offline emanuele

  • Developer
  • *
  • Posts: 291
Re: hover images in a block
« Reply #1 on: April 13, 2016, 05:52:37 AM »
I get Address Not Found when visiting the site you suggested.

Anyway, apart from the address not working, it depends on the kind of info you want to show, so: what do you want to show?

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #2 on: April 13, 2016, 06:12:38 AM »
sorry i had the wrong url to site example http://daiwafishing.com.au/
see attached image of how i would like to have hover images in a block

Offline emanuele

  • Developer
  • *
  • Posts: 291
Re: hover images in a block
« Reply #3 on: April 13, 2016, 07:37:47 AM »
So if I understood right, what you want to obtain is the image becoming bigger on-hover, and have some text below the image.
Right?

If so, you have to wrap the images in a div with a set width, height, and overflow: hidden, something like:
Code: [Select]
    display: inline-block;
    height: 180px;
    width: 180px;
    overflow: hidden;

Then, instead of changing the width and height of the image, you apply the following css to the :hover selector:
Code: [Select]
transform: scale(1.1);
So:
Code: [Select]
.grow img {
    height: 180px;
    width: 180px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.grow img:hover {
    transform: scale(1.1);
}

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1155
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: hover images in a block
« Reply #4 on: April 13, 2016, 04:24:57 PM »
@emanuele all the -moz- -webkit- etc, are deprecated except for the real "transition" property (yeah they became standard, finally, ref: http://www.w3schools.com/css/css3_transitions.asp).
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #5 on: April 13, 2016, 10:14:25 PM »
Hi again

I can get images to grow but if i move to next image to fast  the whole block will get a scroll bar vertical & i don't know how to make  them individual so i can put text & a link under each image  does each image have to be in there own div's or block in blocks???

Offline emanuele

  • Developer
  • *
  • Posts: 291
Re: hover images in a block
« Reply #6 on: April 14, 2016, 08:11:54 AM »
First: what kind of block are you using?

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #7 on: April 14, 2016, 08:23:59 AM »
HTML block  it is

Offline emanuele

  • Developer
  • *
  • Posts: 291
Re: hover images in a block
« Reply #8 on: April 14, 2016, 10:41:31 AM »
The the idea is:
Code: [Select]
<div id="set_of_images">
    <div class="image_caption_container">
        <div class="image_container">
            <img src="whatever" />
        </div>
        This is the caption
    </div>
    <div class="image_caption_container">
        <div class="image_container">
            <img src="whatever" />
        </div>
        This is the caption
    </div>
    <div class="image_caption_container">
        <div class="image_container">
            <img src="whatever" />
        </div>
        This is the caption
    </div>
And the corresponding css should look something like:
Code: [Select]
#set_of_images {width: 100%;}
.image_caption_container {display: inline-block; max-width: 33%;}
.image_container {
    overflow: hidden;
}
/* Not sure if the size is to be set on both of them */
.image_container, .image_container img {
    height: 180px;
    width: 180px;
}
.image_container img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.image_container img:hover {
    transform: scale(1.1);
}

Of course I didn't test it, it's just to give you the general idea.

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #9 on: April 14, 2016, 09:55:31 PM »
That code didn't quiet work  emanuele  it put all images vertical  one after the other  & there is no hover of images  now with that css

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #10 on: April 15, 2016, 01:03:01 AM »
emanuele disreguard my last reply it did work  it was me who bugged up the  code,  only thing i ask can they be centred to fill whole block as they are all left  & a bit more of a space between pictures
« Last Edit: April 15, 2016, 01:09:27 AM by swoodie »

Offline emanuele

  • Developer
  • *
  • Posts: 291
Re: hover images in a block
« Reply #11 on: April 15, 2016, 07:52:17 AM »
I didn't say it was going work out of the box, I said "the idea". Since you were working on it, I assumed you had some knowledge of HTML/CSS and were going to add the missing bits...

If you need the exact code I'll try to have a look, but probably not today. :(

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #12 on: April 15, 2016, 05:17:30 PM »
I didn't say it was going work out of the box, I said "the idea". Since you were working on it, I assumed you had some knowledge of HTML/CSS and were going to add the missing bits...

If you need the exact code I'll try to have a look, but probably not today. :(
   sorry no I have no idea of HTML I just try code in the block or try to copy from other pages it would. Be good if you can help with code with it


Offline emanuele

  • Developer
  • *
  • Posts: 291
Re: hover images in a block
« Reply #13 on: April 16, 2016, 02:20:38 AM »
Sorry, but... what is actually missing?
Looking at your home page the images look working exactly how they are supposed to. Or atleast how understood they are supposed to work.

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #14 on: April 16, 2016, 02:29:42 AM »
all images seem to be left & not spread the block even, could there be more of a space between each image or have a thin border on images as well??

Offline emanuele

  • Developer
  • *
  • Posts: 291
Re: hover images in a block
« Reply #15 on: April 16, 2016, 03:00:37 AM »
Well, then that's a "slightly" different problem then what you asked before, you should not assume I "know" what you want, please always explain it (especially if you change subject). ;)

Change max-width to width and to ".image_container, .image_container img" add margin: auto;
Code: [Select]
#set_of_images {width: 100%;}
.image_caption_container {display: inline-block; width: 33%;}

.image_container, .image_container img {
    height: 180px;
    width: 180px;
    margin: auto;
}

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #16 on: April 16, 2016, 03:24:00 AM »
Ok will ad to edit css & thank you for your help on this

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #17 on: April 17, 2016, 12:02:49 AM »
Sorry to be a pain but the pictures still seem to be left a bit  & not fill the block propley

what would cause that

Offline emanuele

  • Developer
  • *
  • Posts: 291
Re: hover images in a block
« Reply #18 on: April 18, 2016, 03:47:55 AM »
Well, the fact there is no trace of the changes I suggested may be a hint. :P

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #19 on: April 18, 2016, 04:31:35 AM »
I am sure I put them in css