asked on

Image Opacity Not Working In Explorer 11

The opacity works in all of the other browsers except Explorer 11.

www.schuremediagroup.com/portfolio.html

CSS

/*Initial CSS*/
		div.flip-3d {
		-ms-perspective: 1200px; width: 30%; float: left;
		-webkit-perspective: 1200px; width: 30%; float: left;
		perspective: 1200px; width: 30%; float: left;
		}

		div.flip-3d figure {
		position: relative;
		-ms-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-ms-transition: 1s transform;
		-webkit-transition: 1s transform;
		transition: 1s transform;
		font-size: 20px;
		}
		div.flip-3d figure img {
		width: 100%; height:auto;
		}

		/*Captions*/
		div.flip-3d figure figcaption {
		position: absolute;
		width: 100%; height: 100%; top: 0;
		-ms-transform: rotateY(.5turn) translateZ(1px);
		-webkit-transform: rotateY(.5turn) translateZ(1px);
		transform: rotateY(.5turn) translateZ(1px);
		background: rgba(255,255,255,0.9);
		background: rgba(255,255,255,0.9);
		text-align: center;
		/*padding-top: 45%;*/
		-ms-opacity: 0.6;
		-webkit-opacity: 0.6;
		opacity: 0.6;
		filter: alpha(opacity=60); /* For IE8 and earlier */
		-ms-transition: 1s;
		-webkit-transition: 1s;
		transition: 1s;
		-ms-transition: 1s .5s opacity;
		-webkit-transition: 1s .5s opacity;
		transition: 1s .5s opacity;
		}
		#left span {
   	 	display: inline-block;
   		margin-top: 25%;
		}
		#middle span {
   	 	display: inline-block;
   		margin-top: 25%;
		}
		#right span {
   	 	display: inline-block;
   		margin-top: 25%;
		}
		/*Rotations*/
		div.flip-3d:hover figure {
		-ms-transform: rotateY(.5turn); /* IE 9 */
    	-webkit-transform: rotateY(.5turn); /* Chrome, Safari, Opera */
    	transform: rotateY(.5turn);
		 }
		
		div.flip-3d:hover figure figcaption { 
		-ms-opacity: 1;
		-webkit-opacity: 1;
		opacity: 1;
		filter: alpha(opacity=60); /* For IE8 and earlier */ }

Open in new window

Gary

Working fine for me, but a more descriptive report of the issue rather than not working might help

DS928

ASKER

Your right Gary. Here is a description. The images are not opaque. They are suppose to be opaque until the image flips. As it is in the other browsers. Chrome, Firefox, etc. You are not suppose to see the caption until the picture rotates.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

DS928

ASKER

I did this....

/*Initial CSS*/
            div.flip-3d {
            -webkit-perspective: 1200px; width: 30%; float: left;
            -ms-perspective: 1200px; width: 30%; float: left;
            perspective: 1200px; width: 30%; float: left;
            }

            div.flip-3d figure {
            position: relative;

            -webkit-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;

            -webkit-transition: 1s transform;
            -ms-transition: 1s transform;
            transition: 1s transform;
            font-size: 20px;
            }
            div.flip-3d figure img {
            width: 100%; height:auto;
            }

            /*Captions*/
            div.flip-3d figure figcaption {
            position: absolute;
            width: 100%; height: 100%; top: 0;

            -webkit-transform: rotateY(.5turn) translateZ(1px);
            -ms-transform: rotateY(.5turn) translateZ(1px);
            transform: rotateY(.5turn) translateZ(1px);

            background: rgba(255,255,255,0.9);
            text-align: center;
            /*padding-top: 45%;*/

            -webkit-opacity: 0.6;
            -ms-opacity: 0.6;
            opacity: 0.6;
            filter: alpha(opacity=60); /* For IE8 and earlier */

            -webkit-transition: 1s;
            -ms-transition: 1s;
            transition: 1s;

            -webkit-transition: 1s .5s opacity;
            -ms-transition: 1s .5s opacity;
            transition: 1s .5s opacity;

            -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
            -ms-backface-visibility:hidden;
           backface-visibility: hidden;
            }
            #left span {
            display: inline-block;
           margin-top: 25%;
            }
            #middle span {
            display: inline-block;
           margin-top: 25%;
            }
            #right span {
            display: inline-block;
           margin-top: 25%;
            }
            /*Rotations*/
            div.flip-3d:hover figure {
            -webkit-transform: rotateY(.5turn); /* Chrome, Safari, Opera */
            -ms-transform: rotateY(.5turn); /* IE 9 */
      transform: rotateY(.5turn);
             }

            div.flip-3d:hover figure figcaption {
            -webkit-opacity: 1;
            ms-opacity: 1;
            opacity: 1;
            filter: alpha(opacity=100); /* For IE8 and earlier */

            -webkit-backface-visibility: visible; /* Chrome, Safari, Opera */
            -ms-backface-visibility:visible;
           backface-visibility:visible;
            }
It seems to be working now, unless you can see something in the code above that is not correct. Thank you.