• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 76
  • Last Modified:

Create a new template

I want to do a div just like this:
website: https://www.tomsplanner.com/template-example/construction/
I just want this part:
And how when you hoover over it it turns
Could anyone help me out in this?
0
Jazzy 1012
Asked:
Jazzy 1012
  • 5
  • 4
1 Solution
 
Julian HansenCommented:
Why not use bootstrap
<stye type="text/css">
.blocks {
  background: #ff8416;
  color: white;
}
.blocks .div:nth-child(odd) {
   background: #fe5a0d;
} 
</style>

Open in new window

<div class="row blocks">
  <div class="col-md-4">Row 1 Col 1</div>
  <div class="col-md-4">Row 1 Col 2</div>
  <div class="col-md-4">Row 1 Col 3</div>
  <div class="col-md-4">Row 2 Col 1</div>
  <div class="col-md-4">Row 2 Col 2</div>
  <div class="col-md-4">Row 2 Col 3</div>
  <div class="col-md-4">Row 3 Col 1</div>
  <div class="col-md-4">Row 3 Col 2</div>
  <div class="col-md-4">Row 3 Col 3</div>
</div>

Open in new window

0
 
Jazzy 1012Author Commented:
Would it work for them to flip back when i hover over it with bootstrap?
0
 
Jazzy 1012Author Commented:
Ok so for each click I put an image correct, do I need a javascript code for it to flip and show the text?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Julian HansenCommented:
Working sample for the above here
0
 
Julian HansenCommented:
Would it work for them to flip back when i hover over it with bootstrap?
Bootstrap provides the styling - you need to provide the code to flip it to show text.
0
 
Jazzy 1012Author Commented:
ok so I came up with this code on how to flip my images:
.panel {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
}

.card {
    width: 100%;
    height: 100%;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

.front {
    z-index: 2;
    background-image: url(http://img.afreecodec.com/images/v3/wp-content/uploads/2011/05/00_chrome_icon.jpg);
}

.back {
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);  
    transform: rotateX(-180deg);  
    background-image: url(http://www.digitaltrends.com/wp-content/uploads/2011/03/ie-9-icon.jpg);
}

.panel:hover .front {
    z-index: 1;
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.panel:hover .back {
    z-index: 2;   
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

Open in new window

And this is my html code:
<div class="panel">
    <div class="front card">
    </div>
    <div class="back card">  
    </div>
</div>

Open in new window

But when I put it on my sign (which has contents in it), it clashes with my content, how can I put these images at the bottom?
0
 
Jazzy 1012Author Commented:
I opened a new question on my javascript, can you help?
0
 
Jazzy 1012Author Commented:
Hey it shows as one column and one on each row, how can i make it 2 columns with 2 on each row?
0
 
Julian HansenCommented:
Change the background images to content images - take them out of the style and update your markup
<div class="panel">
    <div class="front card">
		<p>Your custom content goes here</p>
		<img src="http://img.afreecodec.com/images/v3/wp-content/uploads/2011/05/00_chrome_icon.jpg" />
    </div>
    <div class="back card">  
		<p>Your custom content goes here</p>
		<img src="http://www.digitaltrends.com/wp-content/uploads/2011/03/ie-9-icon.jpg">
    </div>
</div>

Open in new window

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.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now