I have a slide out tab that currently shows by default on the left side of my page and hides when the button is clicked, then slides out to be visible again when you click it. How can I set the tab to be hidden by default? Here is my code:
HTML:
<aside id="share-wrapper">
<div id="sharebutton">></div>
<div id="share">
<div class="share-box"><div class="facebook-share">f</div></div>
<div class="share-box"><div class="twitter-share">t</div></div>
<div class="share-box"><div class="google-share">g</div></div>
<div class="share-box"><div class="insta-share">i</div></div>
</div>
</aside>
CSS:
#share-wrapper {
float:left;
width:40px;
height:180px;
margin-top:80px;
}
#share {
border:thin solid #333;
border-left:0px;
border-radius:0px 6px 6px 0px;
width:30px;
padding:0px 5px;
height:170px;
}
#sharebutton {
color:#333;
border:thin solid #333;
height:30px;
width:30px;
border-radius:15px;
text-align:center;
line-height:30px;
margin: 0px 0px 10px 5px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
#sharebutton:hover { color:#eee; background-color:#333; cursor:pointer; }
#sharebutton.open {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.share-box,
.share-box img {
width:30px;
height:30px;
}
.facebook-share,
.twitter-share,
.google-share,
.insta-share { width: 100%; height: 100%; line-height: 30px; text-align: center; color:#333; border:thin solid #333; border-radius:15px; margin:10px 0px; background-color:#eee; cursor:pointer;}
.facebook-share:hover,
.twitter-share:hover,
.google-share:hover,
.insta-share:hover { background-color:#333; color:#eee; }
jQuery:
$(document).ready(function () {
$("#sharebutton").click(function () {
$("#share").toggle("slide");
if ($("#sharebutton").hasClass("open")) {
$("#sharebutton").removeClass("open");
}
else {
$("#sharebutton").addClass("open");
}
});
});
Change your js to this. You hide your share div and add the open class to your sharebutton.
So you have the exact same status as you would click the sharebutton.
$(document).ready(function () {
$("#share").hide(); // You set display:none to your share div
$("#sharebutton").addClass("open"); // You add the open class to the sharebutton
$("#sharebutton").click(function () {
$("#share").toggle("slide");
if ($("#sharebutton").hasClass("open")) {
$("#sharebutton").removeClass("open");
}
else {
$("#sharebutton").addClass("open");
}
});
});
JsFiddle
Related
I've created an on/off button and I would like for the html's content's colors to invert when on and to be normal when off! And also I would like for the images and gifs to stay the same color.. I know it's complicated :x But the problem is since the button would be inside a div in html I can't use + space ~ or > to trigger the effect.. Does anyone know how it would be possible to do it please?
Here's the code for now but it's wrong for the html part..
function invertFunction(x) {
x.classList.toggle("invertbutton");
}
.invertfunction{
cursor:pointer;
position:fixed;
top:20px;
left:20px;
width:60px;
height:30px;
}
#onbutton{
width:60px;
height:30px;
background-color:#fff;
border-radius:10px;
border:1px solid #848484;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}
#movingbutton{
width:30px;
height:30px;
border-radius:10px;
border:1px solid #848484;
background-color:#BDBDBD;
-webkit-transition:.2s ease;
-moz-transition:.2s ease;
-o-transition:.2s ease;
transition:.2s ease;
}
.invertbutton #onbutton{
background-color:#42B94E;
}
.invertbutton #movingbutton{
transform: translate(30px);
}
.invertbutton .html{
-webkit-filter: invert(100%);
filter: invert(100%);
}
<html>
<div class="invertfunction"onclick="invertFunction(this)">
<div id="onbutton">
<div id="movingbutton"></div>
</div>
</div>
</html>
Thanks for the help! :)
You can use this code here:
function invertFunction(x) {
x.classList.toggle("invertbutton");
if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
$("div:not(#movingbutton)").css('filter', 'invert(100%)');
$("img").css('filter', 'invert(100%)');
} else {
$("div:not(#movingbutton)").css('filter', 'invert(0%)');
$("img").css('filter', 'invert(0%)');
}
}
And you can remove this css:
.invertbutton .html{
-webkit-filter: invert(100%);
filter: invert(100%);
}
function invertFunction(x) {
x.classList.toggle("invertbutton");
if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
$("div:not(#movingbutton)").css('filter', 'invert(100%)');
$("img").css('filter', 'invert(100%)');
} else {
$("div:not(#movingbutton)").css('filter', 'invert(0%)');
$("img").css('filter', 'invert(0%)');
}
}
div:not(#movingbutton) {
filter: invert(0%);
}
.invertfunction {
cursor: pointer;
position: fixed;
top: 20px;
left: 20px;
width: 60px;
height: 30px;
}
#onbutton {
width: 60px;
height: 30px;
background-color: #fff;
border-radius: 20px;
border: 1px solid #848484;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
#movingbutton{
width: 28px;
height: 28px;
border-radius: 20px;
border: 1px solid #848484;
background-color: #BDBDBD;
-webkit-transition: .2s ease;
-moz-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
}
.invertbutton #onbutton {
background-color: #42B94E;
}
.invertbutton #movingbutton {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="invertfunction"onclick="invertFunction(this)">
<div id="onbutton">
<div id="movingbutton">
</div>
</div>
</div>
<br>
<br>
<br>
<div style="background-color: red;" height="100px" width="100px">Example div1</div>
<div style="background-color: green;" height="100px" width="100px">Example div2</div>
<div style="background-color: blue;" height="100px" width="100px">Example div3</div>
<div>
<img width="100px" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>
CodePen example
I'm sorry this is going to be confusing, I have applied a js function to a div of a sidebar so when you click another bar slides from the left. But it used to work with the hover css function. The thing is on the sliding sidebar there are a few menus you can click. Now that I've changed the way the bar slides (with css), you can't click on them anymore.
My code is down there but the snippet isn't looking good at all because the dimensions are wrong I guess.. Sorry but you can see what it looks like here
function myFunction(x) {
x.classList.toggle("change");
}
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").slideToggle(500);
});
});
</script>
#more{
position:fixed;
top:0;
left:0px;
padding:5px;
font-size:20px;
line-height:40px;
text-align:center;
width:60px;
height:40px;
display:inline-block;
{block:IfSidebarRight}
right:0px;
left:auto;
{/block:IfSidebarRight}
}
.bar1, .bar2, .bar3 {
cursor:pointer;
position:relative;
left:18px;
top:25px;
width: 35px;
height: 5px;
background-color:{color:Main icon background};
margin: 6px 0px;
transition: 0.4s;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
-ms-transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
-ms-transform: rotate(45deg) translate(-8px, -8px) ;
}
/*------ SIDEBAR -----*/
#sidebar{
width:300px;
height:100%;
margin-left:-300px;
{block:IfSidebarRight}
margin-left:300px;
{/block:IfSidebarRight}
top:0px;
}
.change ~ #sidebar2{
margin-left:365px;
{block:IfSidebarRight}
margin-left:-300px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*------ Narrow sidebar -----*/
#sidebar1{
z-index:10;
position:fixed;
top:0px;
left:0;
width:70px;
height:100%;
background:{color:Narrow sidebar background};
{block:IfSidebarRight}
right:0;
left:auto;
{/block:IfSidebarRight}
}
/*------ Wide sidebar -----*/
#sidebar2{
z-index:0;
position:fixed;
top:0px;
margin-left:65px;
width:220px;
height:100%;
background:{color:Wide sidebar background};
background-image:url({image:Wide sidebar background});
{block:IfWideSidebarBackgroundTransparent}
background:transparent;
{/block:IfWideSidebarBackgroundTransparent}
{block:IfSidebarRight}
margin-left:75px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Avatar */
#avatar {
margin: auto;
margin-top: 65px;
width: 50px;
height: 50px;
border-radius: 60px;
border:0px solid
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#avatar img:hover {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: scale(1.4, 1.4);
-webkit-transform: scale(1.4, 1.4);
transform: scale(1.4, 1.4);
}
/* Description */
#description{
position:relative;
margin-left:20px;
color:{color:Description};
background:{color:Description background};
border:5px solid {color:Description background};
max-height:300px;
padding:10px;
width:150px;
overflow-y:auto;
margin-top:20px;
font-size:13px;
line-height:18px;
}
#description:after{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 57px;
}
/* Search box */
#search{
margin-top:10px;
margin-left:20px;
width:180px;
height:30px;
overflow:hidden;
color:{color:Search};
background:{color:Search box background};
}
#search i{
position:absolute;
margin-left:67px;
margin-top:9px;
color:{color:Search}!important;
font-size:12px;
z-index:1000;
}
/* Navigation */
#navi{
cursor:pointer;
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navi .fa-chevron-down {
transition: all 0.7s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a:hover{
cursor:pointer;
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
/* Social icons */
#socialicons{
margin-top:0px;
}
#socialicons i{
display:inline-block;
color:{color:Navigation link}!important;
margin:5px;
font-size:15px;
}
#socialicons i:hover{
color:{color:Hover}!important;
}
/*----- MAIN CONTAINER -----*/
#container{
position:absolute;
top: 50px;
left:50%;
margin-bottom:10px;
min-height:500px;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: -o-calc(100% - 100px);
width: calc(100% - 100px);
min-width:610px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index:1;
{block:IfShowHeader}
top: -moz-calc(100% + 50px);
top: -webkit-calc(100% + 50px);
top: -o-calc(100% + 50px);
top: calc(100% + 50px);
{/block:IfShowHeader}
{block:TagPage}
top:50px;
{/block:TagPage}
{block:SearchPage}
top:50px;
{/block:SearchPage}
{block:PermalinkPage}
top:50px;
{/block:PermalinkPage}
}
<div id="more">
<div id="sidebar">
<div id="sidebar1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="avatar"><img src="{image:Avatar}"></div>
</div>
<div id="sidebar2">
<div id="description">
{Description}</div>
<div id="search">
<form action="/search" method="get"><i class="fa fa-search"></i>
<input type="text" name="q" value="SEARCH" style="position:absolute; left:20px; width:160px; height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px; background:transparent; border:1px solid transparent; color:{color:Search};"/></form>
</div>
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<!--Navigation-->
<div id="navigation">
<div id="navigationin">
{text:Link One Title}
{text:Link Two Title}
{text:Link Three Title}
{text:Link Four Title}
{text:Link Five Title}
</div>
<!--End navigationin-->
<div id="socialicons">
<center>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-youtube"></i>
</center>
</div>
<!--End socialicons-->
</div>
</div>
<!--End sidebar1-->
</div>
<!--End sidebar-->
</div>
<!--End more-->
Thank you so much if you can help me I know it's not clear.. I'm sorry!
Use the developer tools and check out #container - it's covering your sidebar, so - you can't click what's under it.
I have one problem about CSS hover zoom effect.
I have created this DEMO from codepen.io
In this demo you can see there is red color div. When you click the div .CRtW11 will opening. So i want to add hover zoom effect for .ReaC div. I tried the following transform effect but it doesn't worked.
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
I don't understand where i am doing wrong anyone can help me in this regard ?
HTML
CSS
.cR {
width:20px;
height:20px;
position:relative;
background-color:red;
cursor:pointer;
}
.CRtW11 {
position:absolute;
width:215px;
height:40px;
background-color:blue;
opacity:0;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-webkit-transform-origin: left bottom 0px;
-webkit-transform: scale(0);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.24);
z-index:1;
margin-top:-45px;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
padding:5px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.CRtW11-active {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
opacity: 1;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-webkit-transform: scale(1);
}
.ReaC {
float:left;
position:relative;
width:30px;
height:30px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
background-color:red;
margin-right:5px;
display:none;
opacity:0;
-moz-transition: ease 0.2s;
-o-transition: ease 0.2s;
-webkit-transition: ease 0.2s;
transition: ease 0.2s;
}
.ReaC:hover
{
background:yellow;
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
Try removing the following from .ReaC-active
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)
I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.
Any help is really appreciated.
Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before pseudo-element. On hover they use CSS transforms (scale) to change the length.
jsfiddle.
span
{
display: inline-block;
padding: 6px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
span:before
{
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 1px solid black;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
}
span:hover:before
{
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
You can't have the border a different length to the element that it surrounds. However you can achieve a similar effect using just CSS - with a pseudo element. How about something like the following:
div:after{
position:absolute;
bottom:0;
left:50%;
height:1px;
width:0%;
background-color:#444;
display:block;
content:'';
transition:0.3s;
}
div:hover:after{
left:0;
width:100%;
}
JSFiddle
Its not border-bottom, it is done using css pusedo element :before
.navigation li a::before {
position: absolute;
bottom: -1px;
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: #fff;
display: block;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
}
.navigation li a::before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
}
I would like to use this zooming effect on a project of mine
http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html
I am using an image shaped as a circle (png) . I tried to make the containing div circular using border radius
.view {
width: 132px;
height: 132px;
margin-left: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-moz-border-radius: 66px;
-webkit-border-radius:66px;
-khtml-border-radius:66px;
border-radius: 66px;
cursor: default;
}
.view .mask,.view .content {
width: 132px;
height: 132px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
but when the image zoom, it shows rectangular margin. Any help on how to mask as a circle would be much appreciated!
.view: hover {
-moz-transform: scaleX(2);
-o-transform: scaleX(2);
-ms-transform: scaleX(2);
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
Here, the image/images with the classname view gets scaled 2X every time user hovers over the same.
Try use percentges (%) instead of pixels (px).
-moz-border-radius: 25%;
-webkit-border-radius:25%;
-khtml-border-radius:25%;
border-radius: 25%;