collapse collapse

* User Info

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

* Who's Online

  • Dot Guests: 137
  • Dot Hidden: 0
  • Dot Users: 1
  • Dot Users Online:

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • ♦ Ninja ZX-10RR ♦: <3 aegersz
    September 13, 2018, 03:36:09 PM
  • aegersz: I STILL <3 LOVE SimplePortal
    September 13, 2018, 07:11:39 AM
  • 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
Welcome to SimplePortal.net! You can download SimplePortal from the Downloads Area!

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

0 Members and 1 Guest are viewing this topic.

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #20 on: April 18, 2016, 05:06:18 AM »
i don't really understand so also i have to  is ad this to the css to  make it work




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;
}


if that is what you mean by this Change max-width to width and to ".image_container, .image_container img" add margin: auto;

Offline emanuele

  • Developer
  • *
  • Posts: 293
Re: hover images in a block
« Reply #21 on: April 18, 2016, 05:55:10 AM »
1) http://simpleportal.net/index.php?topic=14321.msg71728#msg71728 <= here I suggested to use max-width
So, now I'm suggesting to change that max-width to width.

2) add to ".image_container, .image_container img" the "margin: auto;" string.

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #22 on: April 18, 2016, 07:34:10 AM »
not sure if that is how it is spose to look now ??? you must be shaking your head at me


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: 100%;
    width: 100%;
    margin: auto;
}
.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;
   
    height: 100%;
    width: 100%;
    margin: auto;
}
.image_container img:hover {
    transform: scale(1.1);
}

Offline emanuele

  • Developer
  • *
  • Posts: 293
Re: hover images in a block
« Reply #23 on: April 18, 2016, 11:32:21 AM »
Code: [Select]
.image_caption_container {display: inline-block; 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: 100%;
    width: 100%;
    margin: auto;
}
.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);
}

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #24 on: April 18, 2016, 06:04:27 PM »
 Works perfect  now & thank you again   for your help on this  emanuele 

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: hover images in a block
« Reply #25 on: April 19, 2016, 09:45:58 PM »
I noticed on mobile phone it puts one image  vertical is that due to simpleportal or something else?