HOME | DD

Description
=Trisste asked me to make something similar as in the recent HQ journal with the thumbs-hover.

Well, as CSS3 is not supported by journal-skins, animations couldn't be made.
However, I was able to mimick the rest and though, others might enjoy, too!

This is a code-fragment, for free use in any journal-skin or web-design.
Although I would enjoy being mentioned now and then^^

So, what to do to implement this?

Insert the following CSS into your journal-skin!

.image, .image a img{
width:200px!important;
height:200px!important;
border-radius:100px;
position:relative;
overflow:hidden;
display:inline-block;
cursor: pointer;
}
span.shadow{
padding:0;
}
.credit{
border-radius:100px;
width:190px;
height:190px;
position:absolute;
top:5px;left:5px;
opacity:0;
display:inline-block;
background-color:rgba(100,100,100,0.8);

background: linear-gradient(to bottom, rgba(236,178,156,0.5) 0%,rgba(118,35,2,1) 60%,rgba(190,109,77,1) 65%,rgba(236,178,156,0.5) 100%);

}
.credittext{
width:190px;

height:190px;
border-radius:100px;
display:table-cell;

vertical-align:middle;
text-align:center;
}
.image:hover .credit{
opacity:1;
}or from pastbin: pastebin.com/BXSEDQX9

Then use the following Code within journals:
yourthumb

This awsome Deviation was made by :devdediggefedde:
or copy it from pastebin: pastebin.com/ga0f0SK6

As you can see in the picture above, you have to replace "yourthumb" with the thumb.
If you just use a thumb (code or from media), the quality may be poor.
You can prevent that by making the thumb larger (e.g. hover over it in edit-mode to see the 4 little squares and drag it larger). It will still have the defined size inside the CSS...

Description
=Trisste asked me to make something similar as in the recent HQ journal with the thumbs-hover.

Well, as CSS3 is not supported by journal-skins, animations couldn't be made.
However, I was able to mimick the rest and though, others might enjoy, too!

This is a code-fragment, for free use in any journal-skin or web-design.
Although I would enjoy being mentioned now and then^^

So, what to do to implement this?

Insert the following CSS into your journal-skin!

.image, .image a img{
width:200px!important;
height:200px!important;
border-radius:100px;
position:relative;
overflow:hidden;
display:inline-block;
cursor: pointer;
}
span.shadow{
padding:0;
}
.credit{
border-radius:100px;
width:190px;
height:190px;
position:absolute;
top:5px;left:5px;
opacity:0;
display:inline-block;
background-color:rgba(100,100,100,0.8);

background: linear-gradient(to bottom, rgba(236,178,156,0.5) 0%,rgba(118,35,2,1) 60%,rgba(190,109,77,1) 65%,rgba(236,178,156,0.5) 100%);

}
.credittext{
width:190px;

height:190px;
border-radius:100px;
display:table-cell;

vertical-align:middle;
text-align:center;
}
.image:hover .credit{
opacity:1;
}or from pastbin: pastebin.com/BXSEDQX9

Then use the following Code within journals:
yourthumb

This awsome Deviation was made by :devdediggefedde:
or copy it from pastebin: pastebin.com/ga0f0SK6

As you can see in the picture above, you have to replace "yourthumb" with the thumb.
If you just use a thumb (code or from media), the quality may be poor.
You can prevent that by making the thumb larger (e.g. hover over it in edit-mode to see the 4 little squares and drag it larger). It will still have the defined size inside the CSS...