I'm trying to make my own simple circular transition hover. I've got this far:
http://jsfiddle.net/zLsZE/
aside{
width:183px;
height:183px;
position:absolute;
text-align:center;
border-radius:600px;
-moz-border-radius:600px;
border:10px #fff solid;
overflow:hidden;
cursor:pointer;
background:#fff;
box-shadow: 1px 1px 5px 2px #888888;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
aside:hover{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-color:#ccc;
}
aside img{
width:183px;
height:183px;
position:absolute;
border-radius:600px;
-moz-border-radius:600px;
top:0;
left:0;
margin:0;
opacity:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
aside:hover img{
opacity:0.5;
width:165px;
height:165px;
top:10px;
left:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
aside h2{
position:absolute;
z-index:200;
bottom:0;
width:183px;
margin:0;
padding:5px 0 10px 0;
color:#fff;
text-transform:uppercase;
font-size:14px;
font-weight:bold;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background:#333;
}
<aside class="courses">
<a href="http://www.google.com">
<h2>Courses</h2>
<img src="http://placehold.it/183x183" alt="" />
</a>
</aside>
Works as intended in Firefox, but on Chrome (mac) the h2 element appears outside of the border-radius overflow on the container only on hover.
Any ideas for a workaround for this keeping it pure CSS?
Thanks in advance
Pat
I figured out a way around this - to put the images on the background of a div container inside the aside rather than them being block elements in the html...
Related
my image (640x 360)
my sclass
.auth-home {
background-image: ('./assets/img/auth-background.jpg');
background-size: 100%;
background-position-y: 50%;
}
i try set background-image:
background-image: ('assets/img/auth-background.jpg') no-repeat center center fixed;
background-image: ('../assets/img/auth-background.jpg') no-repeat center center fixed;
background-image: ('./assets/img/auth-background.jpg');
but ONLY device not display
In the page scss:
page-yourPageName {
ion-content {
background-image: url("../assets/img/auth-background.jpg");
}
}
Demo here: http://jsfiddle.net/z2mw3k0a/1/
It works fine on desktop. However, when I use iphone to test Addthis button. The share window will pop up and then hide immediately.
I debugged on safari, and can't figure out the problem,
I just found, for #at4m-menu element, there has a style
.at4-show {
display: block!important;
}
When you unchecked this style on safari inspect element tool and check it again, the pop up window will show.
Any help are appreciated.
This problem is fixed by addthis.
Find the problem related with slideInUp animation.
#-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(1500px)
}
0%,
to {
opacity: 1
}
to {
-webkit-transform: translateY(0)
}
}
#keyframes slideInUp {
0% {
transform: translateY(1500px)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(0)
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.red{
position: fixed;
background: #ff0000;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 14px;
font-weight: 300;
display: block;
width: 200px;
height: 200px;
opacity: 0;
}
<div class="red slideInUp"></div>
It works fine in chrome, but not in safari.
I have made a webpage with a background:
<style>
#import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs);
body {
background-image: url('Header.png');
margin: 0;
color: white;
font-family: 'Mouse Memoirs', sans-serif;
}
</style>
<div align="center">
<h2>ThePeopleHubProject</h2>
</div>
How can I prevent the background from distorting when zooming?
I don't want it to be able to do this: http://imgur.com/8NpvlV9
Only this: http://imgur.com/zmepCPi
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
That should get you pretty far...
I am having difficulty with my menu on my website www.callumritchie.com
When I load the website the menu at the top of the page is already expanded and then when you click the menu icon it hides it.
I want the menu to be hidden when the page is loaded, requiring the visitor to click the menu icon to reveal/expand the menu.
HTML
Home
Work
Contact
About
jquery
$("#menuicon").click(function () {
$("#sitemenu").show("fast");
});
CSS
#switch {
cursor: pointer;
float: left;
position: relative;
z-index: 2;
background-color: #6ea9ca;
border-left: 15px solid #6ea9ca;
border-top: 15px solid #6ea9ca;
border-bottom: 15px solid #6ea9ca;
}
#switch img {
transition: transform .25s linear;
-moz-transition: -moz-transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
-o-transition: -o-transform .25s linear;
}
#menu nav {
font-family:'DroidSans';
margin-top: 23px;
display: inline-block;
position: relative;
height: 36px;
z-index: 1;
transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
-o-transition: all .25s linear;
}
#menu.active nav {
left: -20em;
opacity: 0;
}
#menu.active #switch img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
Try:
$(document).ready(function(){$("#sitemenu").hide()});
edit in response: just swap out #sitemenu for the id of the element you want hidden.
Logo bere: San-Francisco-Family-Photographer.com
On the iphone, the image won't center.
.header-image #header #title-area {
background: url("http://www.san-francisco-family-photographer.com/wp-content/uploads/2013/04/Joey-Chandler-Photographer-square.png") no-repeat scroll center center transparent;
background-position: center;
height: 130px!important;
width: 180px!important;
}
.header-image #title-area, .header-image #title, .header-image #title a {
display: block;
margin-left: auto;
margin-right: auto;
}
Thanks.
You could place it in a div and center it.
div#image {
background: #282;
width:130px;
height:130px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}