ShopDreamUp AI ArtDreamUp
Deviation Actions
Suggested Deviants
Suggested Collections
You Might Like…
Featured in Groups
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!
Then use the following Code within journals:
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...
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{or from pastbin: pastebin.com/BXSEDQX9
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;
}
Then use the following Code within journals:
<div class='image'>yourthumb<div class='credit'><div class='credittext'>or copy it from pastebin: pastebin.com/ga0f0SK6
This awsome Deviation was made by :devdediggefedde:
</div></div></div>
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...
Image size
1366x2231px 748.12 KB
© 2013 - 2024 Dediggefedde
Comments18
Join the community to add your comment. Already a deviant? Log In
absolutely amazing
I used it in my journal
I used it in my journal