Menu icon Foundation

My Posts



My Comments

Jeremy michiels commented on Jeremy michiels's post almost 4 years

ok i fixed it with a little research in transform and transitions for webkit. Adjusted css below
```CSS

.image-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
text-align: center;
border-radius: 0; }

.image-overlay-content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding-left:5%;
padding-right:5%;}

.overlay-slide-in-left img {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out; /* Safari /}
.overlay-slide-in-left .image-overlay-content {
background-image: url(img/CSC-WAS-200x300bg.jpg);
background-color: rgba(0, 0, 0, 0.3);
transform: translateX(-110%);
-ms-transform: translateX(-110%); /
IE 9 /
-webkit-transform: translateX(-110%); /
Safari /
opacity: 1;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out; /
Safari */
box-shadow: 0 0 7px #ccc; }
.overlay-slide-in-left h2 {
font-size: 1.8rem;
background: rgba(255, 255, 255, 0.7);
margin-top: 40%;
color: #000;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); }

.overlay-slide-in-left h3 {
font-size: 1.6rem;
background: rgba(255, 255, 255, 0.7);
margin-top: 10%;
color: #000;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); }

.overlay-slide-in-left p {
opacity: 0;
color: #333;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear; /* Safari */
font-size: .9rem; }
.overlay-slide-in-left .button {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #B63F42;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
position: relative;
border-radius: 0; }

.overlay-slide-in-left .button:hover {
background-color: #424242; }
.overlay-slide-in-left:hover .image-overlay-content, .overlay-slide-in-left:focus .image-overlay-content {
transform: translateX(0px);
-ms-transform: translateX(0px); /* IE 9 /
-webkit-transform: translateX(0px); /
Safari / }
.overlay-slide-in-left:hover img, .overlay-slide-in-left:focus img {
transform: translateX(80%);
-ms-transform: translateX(80%); /
IE 9 /
-webkit-transform: translateX(80%); /
Safari */
transition-delay: 0.1s; }
.overlay-slide-in-left:hover p, .overlay-slide-in-left:focus p {
opacity: 1;
transition-delay: 0.4s; }
```

Jeremy michiels commented on Jeremy michiels's post almost 4 years

Thanks. I ended up removing hover for tablet and mobile via media queries. However, I now noticed that this hover effect does not work in Safari either. What steps are needed to create hover effects and transitions in safari? Are there different CSS rules?

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Jeremy michiels's post almost 4 years

ok i fixed it with a little research in transform and transitions for webkit. Adjusted css below
```CSS

.image-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
text-align: center;
border-radius: 0; }

.image-overlay-content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding-left:5%;
padding-right:5%;}

.overlay-slide-in-left img {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out; /* Safari /}
.overlay-slide-in-left .image-overlay-content {
background-image: url(img/CSC-WAS-200x300bg.jpg);
background-color: rgba(0, 0, 0, 0.3);
transform: translateX(-110%);
-ms-transform: translateX(-110%); /
IE 9 /
-webkit-transform: translateX(-110%); /
Safari /
opacity: 1;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out; /
Safari */
box-shadow: 0 0 7px #ccc; }
.overlay-slide-in-left h2 {
font-size: 1.8rem;
background: rgba(255, 255, 255, 0.7);
margin-top: 40%;
color: #000;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); }

.overlay-slide-in-left h3 {
font-size: 1.6rem;
background: rgba(255, 255, 255, 0.7);
margin-top: 10%;
color: #000;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); }

.overlay-slide-in-left p {
opacity: 0;
color: #333;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear; /* Safari */
font-size: .9rem; }
.overlay-slide-in-left .button {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #B63F42;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
position: relative;
border-radius: 0; }

.overlay-slide-in-left .button:hover {
background-color: #424242; }
.overlay-slide-in-left:hover .image-overlay-content, .overlay-slide-in-left:focus .image-overlay-content {
transform: translateX(0px);
-ms-transform: translateX(0px); /* IE 9 /
-webkit-transform: translateX(0px); /
Safari / }
.overlay-slide-in-left:hover img, .overlay-slide-in-left:focus img {
transform: translateX(80%);
-ms-transform: translateX(80%); /
IE 9 /
-webkit-transform: translateX(80%); /
Safari */
transition-delay: 0.1s; }
.overlay-slide-in-left:hover p, .overlay-slide-in-left:focus p {
opacity: 1;
transition-delay: 0.4s; }
```

You commented on Jeremy michiels's post almost 4 years

Thanks. I ended up removing hover for tablet and mobile via media queries. However, I now noticed that this hover effect does not work in Safari either. What steps are needed to create hover effects and transitions in safari? Are there different CSS rules?

Posts Followed

Following

  • No Content

Followers

  • No Content