Funky Padding

Posted on 2014-08-26
Last Modified: 2014-08-26
I have a page with images that flip.  For some reason I have a grey area under each image and I can't seem to find where in the CSS this is being controlled.

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

		div.flip-3d figure {
		position: relative;
		transform-style: preserve-3d;
		transition: 1s transform;
		font-size: 1.6rem;
		div.flip-3d figure img {
		width: 100%; height: Auto;

		div.flip-3d figure figcaption {
		position: absolute;
		width: 100%; height: 100%; top: 0;
		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%;
		/*opacity: 0.6;*/
		transition: 1s;
		/*transition: 1s .5s opacity;*/
		div.flip-3d:hover figure { transform: rotateY(.5turn); }
		div.flip-3d:hover figure figcaption { opacity: 1; }

Open in new window

the Link
Question by:DS928
    LVL 58

    Accepted Solution

    In div.flip-3d figure figcaption {} remove the padding

    Author Closing Comment

    That worked to straighten out the photo but now the text is no longer centered.
    LVL 58

    Expert Comment

    Put the text in a span and add this css

    #market span {
        display: inline-block;
        margin-top: 25%;

    Open in new window


    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    734 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

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now