Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Location
    London
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Transitions Circle Hover Effects - Resize circles?

    Hi there.

    I was wondering if anyone here would be able to help me please?

    I have been playing around with this tutorial http://tympanus.net/codrops/2012/08/...s-transitions/ (Demo 4 specifically) as I am wanting to implement these circles to a website of mine.

    My problem is that I can't seem to resize the circles. In the files supplied with the tutorial they are larger than I would like.

    I have played around with various numbers in the CSS, and have managed to make certain parts smaller, but then other parts do not resize, or they become misaligned.

    My knowledge of this area is pretty basic, so I'm feeling a bit out of my depth with this one! Can anyone help?

    Thankyou


    There are multiple CSS Files included in the tutorial, but I think the relvant parts for the circles are:

    Code:
    .ch-grid {
    	margin: 20px 0 0 0;
    	padding: 0;
    	list-style: none;
    	display: block;
    	text-align: center;
    	width: 100%;
    }
    
    .ch-grid:after,
    .ch-item:before {
    	content: '';
        display: table;
    }
    
    .ch-grid:after {
    	clear: both;
    }
    
    .ch-grid li {
    	width: 220px;
    	height: 220px;
    	display: inline-block;
    	margin: 20px;
    }
    and also

    Code:
    .ch-item {
    	width: 100%;
    	height: 100%;
    	border-radius: 50%;
    	position: relative;
    	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    	cursor: default;
    }
    
    .ch-info-wrap{
    	position: absolute;
    	width: 180px;
    	height: 180px;
    	border-radius: 50%;
    
    	-webkit-perspective: 800px;
    	-moz-perspective: 800px;
    	-o-perspective: 800px;
    	-ms-perspective: 800px;
    	perspective: 800px;
    
    	-webkit-transition: all 0.4s ease-in-out;
    	-moz-transition: all 0.4s ease-in-out;
    	-o-transition: all 0.4s ease-in-out;
    	-ms-transition: all 0.4s ease-in-out;
    	transition: all 0.4s ease-in-out;
    
    	top: 20px;
    	left: 20px;
    	background: #f9f9f9 url(../images/bg.jpg);
    	box-shadow: 
    		0 0 0 20px rgba(255,255,255,0.2), 
    		inset 0 0 3px rgba(115,114, 23, 0.8);
    
    }
    
    .ch-info{
    	position: absolute;
    	width: 180px;
    	height: 180px;
    	border-radius: 50%;
    
    	-webkit-transition: all 0.4s ease-in-out;
    	-moz-transition: all 0.4s ease-in-out;
    	-o-transition: all 0.4s ease-in-out;
    	-ms-transition: all 0.4s ease-in-out;
    	transition: all 0.4s ease-in-out;
    		
    	-webkit-transform-style: preserve-3d;
    	-moz-transform-style: preserve-3d;
    	-o-transform-style: preserve-3d;
    	-ms-transform-style: preserve-3d;
    	transform-style: preserve-3d;
    
    }
    
    .ch-info > div {
    	display: block;
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	border-radius: 50%;
    	background-position: center center;
    
    	-webkit-backface-visibility: hidden;
    	-moz-backface-visibility: hidden;
    	-o-backface-visibility: hidden;
    	-ms-backface-visibility: hidden;
    	backface-visibility: hidden;
    }
    
    .ch-info .ch-info-back {
    	-webkit-transform: rotate3d(0,1,0,180deg);
    	-moz-transform: rotate3d(0,1,0,180deg);
    	-o-transform: rotate3d(0,1,0,180deg);
    	-ms-transform: rotate3d(0,1,0,180deg);
    	transform: rotate3d(0,1,0,180deg);
    	
    	background: #000;
    }
    
    .ch-img-1 { 
    	background-image: url(../images/10.jpg);
    }
    
    .ch-img-2 { 
    	background-image: url(../images/11.jpg);
    }
    
    .ch-img-3 { 
    	background-image: url(../images/12.jpg);
    }
    
    .ch-info h3 {
    	color: #fff;
    	text-transform: uppercase;
    	letter-spacing: 2px;
    	font-size: 14px;
    	margin: 0 15px;
    	padding: 40px 0 0 0;
    	height: 90px;
    	font-family: 'Open Sans', Arial, sans-serif;
    	text-shadow: 
    		0 0 1px #fff, 
    		0 1px 2px rgba(0,0,0,0.3);
    }
    
    .ch-info p {
    	color: #fff;
    	padding: 10px 5px;
    	font-style: italic;
    	margin: 0 30px;
    	font-size: 12px;
    	border-top: 1px solid rgba(255,255,255,0.5);
    }
    
    .ch-info p a {
    	display: block;
    	color: #fff;
    	color: rgba(255,255,255,0.7);
    	font-style: normal;
    	font-weight: 700;
    	text-transform: uppercase;
    	font-size: 9px;
    	letter-spacing: 1px;
    	padding-top: 4px;
    	font-family: 'Open Sans', Arial, sans-serif;
    }
    
    .ch-info p a:hover {
    	color: #fff222;
    	color: rgba(255,242,34, 0.8);
    }
    
    .ch-item:hover .ch-info-wrap {
    	box-shadow: 
    		0 0 0 0 rgba(255,255,255,0.8), 
    		inset 0 0 3px rgba(115,114, 23, 0.8);
    }
    
    .ch-item:hover .ch-info {
    	-webkit-transform: rotate3d(0,1,0,-180deg);
    	-moz-transform: rotate3d(0,1,0,-180deg);
    	-o-transform: rotate3d(0,1,0,-180deg);
    	-ms-transform: rotate3d(0,1,0,-180deg);
    	transform: rotate3d(0,1,0,-180deg);
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Basically it's the border-radius property that controls the rounding on the corners; when set to 50% you should have a circle. How big a circle depends on the original dimensions of the image. If the final circle is too big change the width and height of the image.
    Code:
    .ch-info-wrap{
    	position: absolute;
    	width: 80px;
    	height: 80px;
    	border-radius: 50%;
    }
    is a smaller citcle than
    Code:
    .ch-info-wrap{
    	position: absolute;
    	width: 180px;
    	height: 180px;
    	border-radius: 50%;
    }
    For
    Code:
    <body>
    <img src="images/facebook.jpg" class="ch-info-wrap">
    
    </body>
    Last edited by sunfighter; 04-13-2013 at 04:23 PM. Reason: added body code
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •