SimplePortal
Customization => Custom Coding => Topic started by: swoodie 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?
-
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?
-
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
-
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:
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:
transform: scale(1.1);
So:
.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);
}
-
@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).
-
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???
-
First: what kind of block are you using?
-
HTML block it is
-
The the idea is:
<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:
#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.
-
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
-
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
-
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. :(
-
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
-
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.
-
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??
-
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;
#set_of_images {width: 100%;}
.image_caption_container {display: inline-block; width: 33%;}
.image_container, .image_container img {
height: 180px;
width: 180px;
margin: auto;
}
-
Ok will ad to edit css & thank you for your help on this
-
Sorry to be a pain but the pictures still seem to be left a bit & not fill the block propley
what would cause that
-
Well, the fact there is no trace of the changes I suggested may be a hint. :P
-
I am sure I put them in css
-
i don't really understand so also i have to is ad this to the css to make it work
#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;
-
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.
-
not sure if that is how it is spose to look now ??? you must be shaking your head at me
#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);
}
-
.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);
}
-
Works perfect now & thank you again for your help on this emanuele
-
I noticed on mobile phone it puts one image vertical is that due to simpleportal or something else?