Databases
StackOverflow2013
Postsdbo
POCss Image Hover inside Border-Radius
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCss Image Hover inside Border-Radius
    text
    copied!<p>I'm making an image that can be hovered inside a border-radius with 100%.<br/> And when you hover it the image will scale. Now comes the problem. When I hover it, you will see the image for 1 sec outside the border-radius.</p> <p>It seems to be working in Firefox. But not in chrome and Safari.</p> <p><strong>Live Demo</strong>:<br/> <a href="http://jewelbeast.com/something/imghover/rounded.html" rel="nofollow">http://jewelbeast.com/something/imghover/rounded.html</a><br/></p> <p><strong>HTML</strong>:<br/></p> <pre><code> &lt;div class="rounded-smallborder"&gt; &lt;section class="img-scale img-opacity" style="width: 250px; height: 250px;"&gt; &lt;img src="http://placehold.it/250x250" /&gt; &lt;div class="text"&gt; &lt;span&gt; &lt;h1&gt;This is a title&lt;/h1&gt; &lt;ul&gt; &lt;li&gt;List number 1&lt;/li&gt; &lt;li&gt;List number 2&lt;/li&gt; &lt;li&gt;List number 3&lt;/li&gt; &lt;/ul&gt; &lt;/span&gt; &lt;/div&gt; &lt;/section&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong>:<br/></p> <pre><code>div.rounded-smallborder{ margin-top: 22px; margin-bottom: 22px; height: 362px; width: 228px; float: left; display: block; margin-left: 10px; } div.rounded-smallborder section{ position: relative; width: 217px; height: 217px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; border: 5px solid white; -webkit-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); -moz-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); -ms-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); -o-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1); float:left; text-align: center; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; overflow: hidden; background: #dfdfdf; } div.rounded-smallborder section img{ position: absolute; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; left: 0%; } div.rounded-smallborder section.img-slideleft:hover img{ margin-left: -35px; } div.rounded-smallborder section.img-zoomin:hover img{ width: 550px; } div.rounded-smallborder section.img-slideup:hover img{ margin-top: -35px; } div.rounded-smallborder section.img-opacity:hover img{ opacity: 0.2; } div.rounded-smallborder section.img-diagonal:hover img{ margin-top: -35px; margin-left: -35px; } div.rounded-smallborder section.img-rotation:hover img{ -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); } div.rounded-smallborder section.img-scale:hover img{ -webkit-transform:scale(1.45); -o-transform:scale(1.45); -moz-transform:scale(1.45); -ms-transform:scale(1.45); transform:scale(1.45); } /* Text effecten */ div.rounded-smallborder section.txt-slideinleft .text{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-left:-250px; } div.rounded-smallborder section.txt-slideinleft:hover .text{ margin-left: 0px; } div.rounded-smallborder section.txt-slideinleftTitle .text span h1{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-left:-250px; } div.rounded-smallborder section.txt-slideinleftTitle:hover .text span h1{ margin-left: 0px; } div.rounded-smallborder section.txt-slideinright .text{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-left:250px; } div.rounded-smallborder section.txt-slideinright:hover .text{ margin-left: 0px; } div.rounded-smallborder section.txt-slideinrightTitle .text span h1{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-left:250px; } div.rounded-smallborder section.txt-slideinrightTitle:hover .text span h1{ margin-left: 0px; } div.rounded-smallborder section.txt-slideinleftRightAll .text span h1{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-left:-250px; } div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span h1{ margin-left: 0px; } div.rounded-smallborder section.txt-slideinleftRightAll .text span p{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-left:250px; } div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span p{ margin-left: 0px; } div.rounded-smallborder section.txt-slideinleftRightAll .text span a{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span a{ } div.rounded-smallborder section.txt-opacityAll .text span h1{ -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; transition-delay: 0s; -webkit-transition-delay: 0s; /* Safari */ -moz-transition-delay: 0s; /* Safari */ -ms-transition-delay: 0s; /* Safari */ -o-transition-delay: 0s; /* Safari */ opacity: 0; } div.rounded-smallborder section.txt-opacityAll:hover .text span h1{ opacity: 1; } div.rounded-smallborder section.txt-opacityAll .text span p{ -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; transition-delay: .5s; -webkit-transition-delay: .5s; /* Safari */ -moz-transition-delay: .5s; /* Safari */ -ms-transition-delay: .5s; /* Safari */ -o-transition-delay: .5s; /* Safari */ opacity: 0; } div.rounded-smallborder section.txt-opacityAll:hover .text span p{ opacity: 1; } div.rounded-smallborder section.txt-opacityAll .text span a{ -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; transition-delay: 1s; -webkit-transition-delay: 1s; /* Safari */ -moz-transition-delay: 1s; /* Safari */ -ms-transition-delay: 1s; /* Safari */ -o-transition-delay: 1s; /* Safari */ opacity: 0; } div.rounded-smallborder section.txt-opacityAll:hover .text span a{ opacity: 1; } div.rounded-smallborder section.txt-slideintop .text{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-top:-450px; margin-left: 0px; } div.rounded-smallborder section.txt-slideintop:hover .text{ margin-top: 0px; } div.rounded-smallborder section.txt-slideinbottom .text{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-top:450px; margin-left: 0px; } div.rounded-smallborder section.txt-slideinbottom:hover .text{ margin-top: 0px; } div.rounded-smallborder section.txt-longopacity .text{ -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; margin-left: -250px; opacity: 0; } div.rounded-smallborder section.txt-longopacity:hover .text{ margin-left: 0px; opacity: 1; } div.rounded-smallborder section.txt-slideinleftRotation .text{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-left: -250px; } div.rounded-smallborder section.txt-slideinleftRotation:hover .text{ margin-left: 0px; -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); } div.rounded-smallborder section.txt-slideinrightRotation .text{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-left:250px; } div.rounded-smallborder section.txt-slideinrightRotation:hover .text{ margin-left: 0px; -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); } div.rounded-smallborder section.txt-slideintopRotation .text{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-top: -450px; margin-left: 0px; } div.rounded-smallborder section.txt-slideintopRotation:hover .text{ margin-top: 0px; -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); } div.rounded-smallborder section.txt-slideinbottomRotation .text{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin-top: 450px; margin-left: 0px; } div.rounded-smallborder section.txt-slideinbottomRotation:hover .text{ margin-top: 0px; -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); } /* End of text effecten */ div.rounded-smallborder section .text{ position: absolute; top: 0; left: 0; height: 100%; width:100%; display:table; margin-left: -250px; } div.rounded-smallborder section:hover .text{ margin-left: 0px; } div.rounded-smallborder section span{ width: 200px; display: table-cell; vertical-align: middle; padding: 20px; color: black; opacity: 0; text-shadow: 1px 1px 0px rgba(255,255,255,0.3); } div.rounded-smallborder section:hover span{ opacity: 1; } div.rounded-smallborder section:hover img{ opacity: 0.5; } div.rounded-smallborder section span h1{ width: 100%; text-align: center; font-size: 18px; font-family: Verdana, sans-serif; font-weight: bold; line-height: 25px; margin-bottom: 3px; } div.rounded-smallborder section span p{ width: 100%; text-align: center; font-size: 10px; font-family: Verdana, sans-serif; font-weight: bold; margin-bottom: 10px; } div.rounded-smallborder section span ul{ list-style-position:inside; } div.rounded-smallborder section span ul li{ width: 100%; text-align: center; font-size: 10px; font-family: Verdana, sans-serif; font-weight: bold; line-height: 15px; } div.rounded-smallborder section span a.button{ display: table; margin: 0px auto; text-align: center; color: white; text-shadow: none !important; text-decoration: none; font-size: 10px; font-family: Verdana, sans-serif; font-weight: bold; padding: 9px 10px 11px 10px; border: 1px solid #000000; background: #494949; /* Old browsers */ background: -moz-linear-gradient(top, #494949 1%, #3a3a3a 94%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#494949), color-stop(94%,#3a3a3a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* IE10+ */ background: linear-gradient(to bottom, #494949 1%,#3a3a3a 94%); /* W3C */ } div.rounded-smallborder section span a.entire{ width: 100%; position: absolute; top: 0px; left: 0px; height: 100%; } /* END */ </code></pre> <p>I hope someone know the problem of it.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload