?
Solved

Image Opacity Not Working In Explorer 11

Posted on 2014-08-28
4
Medium Priority
?
187 Views
Last Modified: 2014-08-29
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

0
Comment
Question by:DS928
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40291680
Working fine for me, but a more descriptive report of the issue rather than not working might help
0
 

Author Comment

by:DS928
ID: 40291711
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.
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40292595
I'm not entirely sure, the normal way of doing this is using backface-visibility,
0
 

Author Closing Comment

by:DS928
ID: 40292881
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.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month16 days, 19 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question