So after configuring out an awesome type of displaying photo description on mouse hover, the result was successful with of course few limitations. So i gonna share what I did to get it work and what i cannot do, I leave it to you. I recently added an update, now you can also insert slide to top and bottom option.
1. Prepare the photos and upload them to your CSS by going to Weebly > Design > Edit HTML > add new item. Or You can simply copy an image address from the web. Remember to get the photo dimensions. Please check the demo.
2.. Go to <head> (Help for <head> here) and just below it paste the following code:
<style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}
.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}
/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto; /* reset from default */
bottom:auto; /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}
.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
.imagepluscontainer div.leftslide{
width: 150px; /* reset from default */
top:15px;
left:0;
bottom:auto; /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}
.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
.imagepluscontainer div.upslide{
top:0;
bottom:auto; /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}
</style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}
.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}
/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto; /* reset from default */
bottom:auto; /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}
.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
.imagepluscontainer div.leftslide{
width: 150px; /* reset from default */
top:15px;
left:0;
bottom:auto; /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}
.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
.imagepluscontainer div.upslide{
top:0;
bottom:auto; /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}
</style>
3. Actually, there must be four type of slides which is top, bottom, left and right but i can only show you left and right. I simply can't configure the up and down and I need to research further. I will update once I learned. So here are sample codes which i have to edit to be compatible in Weebly. Drag one "embed tool" to your page and paste any of the following:
<div class="imagepluscontainer" style="width:200px; height:210px; left:1px;">
<img src="http://theweeblytricks.weebly.com/files/theme/weebly.jpg" />
<div class="desc rightslide">
Named one of TIME's 50 Best Websites,<a href="http://en.wikipedia.org/wiki/Colosseum">Weebly</a> gives everyone a surprisingly easy way to create a unique site.
</div>
</div>
<img src="http://theweeblytricks.weebly.com/files/theme/weebly.jpg" />
<div class="desc rightslide">
Named one of TIME's 50 Best Websites,<a href="http://en.wikipedia.org/wiki/Colosseum">Weebly</a> gives everyone a surprisingly easy way to create a unique site.
</div>
</div>
Slide to Left
<div class="imagepluscontainer" style="width:200px; height:210px;right:10px">
<img src="http://theweeblytricks.weebly.com/files/theme/weebly.jpg" />
<div class="desc leftslide">
Named one of TIME's 50 Best Websites,<a href="http://en.wikipedia.org/wiki/Colosseum">Weebly</a> gives everyone a surprisingly easy way to create a unique site.
</div>
</div>
<img src="http://theweeblytricks.weebly.com/files/theme/weebly.jpg" />
<div class="desc leftslide">
Named one of TIME's 50 Best Websites,<a href="http://en.wikipedia.org/wiki/Colosseum">Weebly</a> gives everyone a surprisingly easy way to create a unique site.
</div>
</div>
For the Slide to Right, you must indent the HTML code to the left by using the built in tool in Weebly for indenting HTML. You can see it once you click an html code in editor area. While the Slide to left, it should be indented to the right.
4. Change the following for any of the codes:
Width: Must be the same with the image width.
Height: Must be the same with the image height and add with 10px for the shadows.
Blue text: This is the indentation space either left or right. Try the default first, adjust if necessary.
Bold Text: The Image link
Yellow Text: The image description you wish. An URL was included inside the description. You can edit or simply remove.
5. As I told you before, there should be slide to top or downslide but I cannot configure it for now.
6. If you have question feel free to ask. I am willing to answer far as i know or learn from you. Thank You!
UPDATE:
Slide to top
UPDATE:
Slide to top
<div class="imagepluscontainer" style="width:200px; height:210px;left:10px;">
<img src="http://theweeblytricks.weebly.com/files/theme/weebly.jpg" />
<div class="desc upslide">
Named one of TIME's 50 Best Websites,<a href="http://www.weebly.com/link/xIa1LJ">Weebly</a> gives everyone a surprisingly easy way to create a unique site.
</div>
</div>
<img src="http://theweeblytricks.weebly.com/files/theme/weebly.jpg" />
<div class="desc upslide">
Named one of TIME's 50 Best Websites,<a href="http://www.weebly.com/link/xIa1LJ">Weebly</a> gives everyone a surprisingly easy way to create a unique site.
</div>
</div>
Slide to Bottom
<div class="imagepluscontainer" style="width:200px; height:210px; z-index:2">
<img src="http://theweeblytricks.weebly.com/files/theme/weebly.jpg" />
<div class="desc">
Named one of TIME's 50 Best Websites,<a href="http://www.weebly.com/link/xIa1LJ">Weebly</a> gives everyone a surprisingly easy way to create a unique site.
</div>
</div>
<img src="http://theweeblytricks.weebly.com/files/theme/weebly.jpg" />
<div class="desc">
Named one of TIME's 50 Best Websites,<a href="http://www.weebly.com/link/xIa1LJ">Weebly</a> gives everyone a surprisingly easy way to create a unique site.
</div>
</div>
There you go...
0 comments: