How put inside the class hexagon image for hexagon.. i wanna change background-image on the tag image <img>..
My example: http://codepen.io/anon/pen/ZBzYqp
.hexagon span {
position: absolute;
display: block;
border-left: 100px solid red;
border-right: 100px solid red;
width: 200px;
}
.top {
top: 0;
border-bottom: 173px solid transparent;
}
.bottom{
bottom: 0;
border-top: 173px solid transparent;
}
.hexagon {
background: url(http://placekitten.com/400/400/);
width: 400px;
height: 346px;
position: relative;
}
<div class="hexagon pic">
<span class="top"></span>
<span class="bottom"></span>
</div>
MY UPDATED Answer according to your required size:
<div id="wrap">
<div class="hex-row">
<a href="http://www.google.ca" class='hexaHolder'>
<div class="hexa">
<div class="hex1">
<div class="hex2">
<img src="http://csshexagon.com/img/meow.jpg" alt="" />
</div>
</div>
</div>
</a>
</div>
</div>
.hexaHolder{
height: 115px;
width: 99px;
float: left;
}
.hexa img{
width:130%;
margin-top: -5px;
margin-left:-50px
}
.hexa, .hexa div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
}
.hexa {
text-align: center;
margin: 0;
width: 270px;
height: 315px;
}
.hexa div {
width: 100%;
height: 100%;
}
.hexa {
transform: rotate(120deg);
}
.hex1 {
transform: rotate(-60deg);
}
.hex2 {
transform: rotate(-60deg);
}
.hex-row {
clear: left;
}
.hexaHolder.even {
margin-top: 57.5px;
}
#wrap {
min-width:600px;
}
Check the Fiddle
I have even come up with the issue like this. my solutions is below here.
running Fiddle
HTML
<div id="wrap">
<div class="hex-row">
<a href="http://www.google.ca" class='hexaHolder'>
<div class="hexa">
<div class="hex1">
<div class="hex2">
<img src="http://csshexagon.com/img/meow.jpg" alt="" />
</div>
</div>
</div>
</a>
</div>
</div>
CSS
.hexaHolder{
height: 115px;
width: 99px;
float: left;
}
.hexa img{
width:100%;
margin-top: -5px;
}
.hexa, .hexa div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
}
.hexa {
text-align: center;
margin: 0;
width: 135px;
height: 115px;
}
.hexa div {
width: 100%;
height: 100%;
}
.hexa {
transform: rotate(120deg);
}
.hex1 {
transform: rotate(-60deg);
}
.hex2 {
transform: rotate(-60deg);
}
.hex-row {
clear: left;
}
.hexaHolder.even {
margin-top: 57.5px;
}
#wrap {
min-width:600px;
}
Related
So, I have gallery that contains some photos. I want to make when the image hovered then some information of the person is shows up, the name of person and the their role.
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
color: white;
width: 100%;
height: 0;
transition: .5s ease;
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> HIS JOB </div>
</div>
</div>
I used overlay to make the info shows up, but why the text is not in order and its not on the photo? I want its in the middle bottom on the photo. any suggestion? thanks before.
below is updated snippet
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
position:relative;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 5px;
left: 5px;
right: 0;
overflow: hidden;
color: white;
width: calc(100% - 10px) ;
height: 0;
transition: .5s ease;
display:block;
background:rgba(0,0,0,0.5);
}
.flag:hover .biodata{
height:calc(100% - 10px);
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> President of INASGOC </div>
</div>
</div>
See this fiddle
CSS
.biodata {
z-index:100;
}
.flag:hover .biodata {
height:100%
}
Use this Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Shaki_Waterfall2.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">
<p style="padding:20px;">I am Mr. Alven</p>
</div>
</div>
</div>
</body>
</html>
How can I make two divs like these?
If the gray area becomes small, the two divs maintain the appearance.
In the red box I can use box-sizing: border-box; and padding: 50% 0;, but in the blue box I need to put text.
.c {
padding: 10px;
background-color: gray;
overflow: auto;
margin: 0 0 10px 0;
}
.c1 {
width: 300px;
}
.c2 {
width: 200px;
}
.w {
width: 100%;
}
.w div {
float: left;
}
.i {
width: 50%;
height: 50px;
background-color: red;
}
.t {
width: 50%;
height: 50px;
background-color: blue;
}
<div class="c c1">
<div class="w">
<div class="i"></div>
<div class="t"></div>
</div>
</div>
<div class="c c2">
<div class="w">
<div class="i"></div>
<div class="t"></div>
</div>
</div>
Something like this?
.square {
box-sizing: border-box;
padding: 50% 50% 0 0;
width: 50%;
float: left;
position: relative;
}
.image {
background: red;
}
.text {
background: blue;
}
.text > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
color: white;
padding: 50% 0;
line-height: 0;
text-transform: uppercase;
}
<div class="wrap">
<div class="square image"></div>
<div class="square text">
<div>text</div>
</div>
</div>
.square{
width: 50%;
position: relative;
float: left;
}
.square:before{
content: '\0020';
padding-top: 100%;
display: block;
}
.boxer{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#c1{
background: salmon;
}
#c2{
background: lightblue;
}
#image{
width: 100%;
height: 100%;
position: relative;
}
.centered{
position: absolute;
top: 50%;
left: 50%;
text-align: center;
-webkit-transform: -webkit-translate(-50%, -50%);
-moz-transform: -moz-translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div id="container">
<div class="square">
<div class="boxer" id="c1">
<img id="image" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/>
</div>
</div>
<div class="square">
<div class="boxer" id="c2">
<p class="centered">
You can put your text here!
I you don't like to have it centered,
remove class centered!
</p>
</div>
</div>
</div>
I want the text in the blue box to appear on its opening, but it should be fixed, not adjusting to the blue box width.
I also need some ideas as to what can be other interesting ways to display the text in a similar manner that I just did. (ie not visible initially but on hovering, text visible)
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
width: 400px;
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
you can just use transform with scale or translate:
scale:
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow:hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width:400px;
background-color: blue;
display: inline-block;
transform-origin:0 0;
transform: translateX(-4px) scale(0,1);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(4px) scale(1,1);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
translate:
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow:hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width:400px;
background-color: blue;
display: inline-block;
transform-origin:0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
You can make the text as sibling to the background. Check out the fiddle.
https://jsfiddle.net/gwbdrskg/
This is the HTML
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<div class="background"></div>
<p class='text'>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</div>
</body>
And the CSS
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
display: inline-block;
position: relative;
width: 400px;
}
#about_text .background {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about_text .text {
position: absolute;
top: 0;
}
#about {
top: 10%;
}
#about_button:hover + #about_text .background {
width: 400px;
}
I want a stacked bar with inner vertical text. I failed to put it in the right position. This is how I want it:
This is my code and output:
.colWrapper{
height:200px;
width:100px;
position:relative;
border:1px solid #ccc;
}
.barContainer{
position:absolute;
bottom:0;
width:100%;
}
.bar{
widith:100%;
padding:10px;
transform: rotate(90deg);
text-align:center;
margin:0
}
<div class="colWrapper">
<div class="barContainer">
<div class="bar" style="background-color:#b4cde2;">Software</div>
<div style="clear:both;"></div>
<div class="bar" style="background-color:#7ca7cc;">Banking</div>
</div>
</div>
You need to use -90deg and also, use the transform-origin:
.colWrapper {
height: 200px;
width: 100px;
position: relative;
border: 1px solid #ccc;
}
.barContainer {
bottom: 0;
width: 100%;
}
.bar {
padding: 10px;
transform: rotate(-90deg);
text-align: center;
margin: 0;
left: -25px;
transform-origin: right bottom;
position: absolute;
width: 100px;
bottom: 120px;
}
.bar:first-child {
left: -80px;
}
<div class="colWrapper">
<div class="barContainer">
<div class="bar" style="background-color:#b4cde2;">Software</div>
<div class="bar" style="background-color:#7ca7cc;">Banking</div>
</div>
</div>
Second Method:
.colWrapper {
height: 200px;
width: 100px;
position: relative;
border: 1px solid #ccc;
}
.barContainer {
bottom: -5px;
width: 100%;
transform: rotate(-90deg);
position: absolute;
left: 5px;
}
.bar {
padding: 10px;
text-align: center;
margin: 0 0 15px;
sposition: absolute;
}
.bar:first-child {
left: -80px;
}
<div class="colWrapper">
<div class="barContainer">
<div class="bar" style="background-color:#b4cde2;">Software</div>
<div class="bar" style="background-color:#7ca7cc;">Banking</div>
</div>
</div>
You can also take a look at writing-mode and flex-box.
https://developer.mozilla.org/fr/docs/Web/CSS/writing-mode
div {
display: inline-flex;
flex-flow: column wrap;
height: 320px;
width: 270px;
vertical-align: middle;
}
span {
padding: 20px 5px;
background: #1E84C6;
-webkit-writing-mode: vertical-lr;
/* old Win safari */
writing-mode: vertical-lr;
writing-mode: tb-lr;
text-align: right;
margin: 10px;
height: 100px;
width: 60px;
font-size: 30px;
line-height: 60px;
}
span:nth-child(3) {
height: 260px;
}
a {
display: inline-block;
text-decoration: none;
letter-spacing: 2px;
text-transform: uppercase;
font-family: helvetica;
color: white;
}
div + div a {
transform: scale(-1, -1);
/* reverse writing direction optionnal*/
btext-align: left;
transform-origin: 1em 1.25em;
}
span:nth-child(2) {
background: #283F4F;
}
span:nth-child(4) {
background: #1DC685;
}
-
<div>
<span> <a href>one</a></span>
<span> <a href>two</a></span>
<span> <a href>three</a></span>
<span> <a href>four</a></span>
<span> <a href>five</a></span>
</div>
or
<div>
<span> <a href>one</a></span>
<span> <a href>two</a></span>
<span> <a href>three</a></span>
<span> <a href>four</a></span>
<span> <a href>five</a></span>
</div>
and so on ...
I am trying to rotate a div which is inside another div. whats wrong with my code.I come across with another method(:before child) but whats wrong with this methods? Thanks
body {
background: #ccc
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2 {
position: relative;
}
.box1 {
transform: rotate3d;
position: absolute;
width: 20%;
height: 20px;
background-color: aqua;
}
<div class="box effect2">
<div class="box1"></div>
</div>
body {
background: #ccc
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2 {
position: relative;
}
.box1{
transition: 1.5s;
position: absolute;
width: 20%;
height: 20px;
background-color: aqua;
}
.box1:hover{
transform: rotate3d(1,-1, 1,60deg);
}
<div class="box effect2">
<div class="box1"></div>
</div>
Give x,y or z to rotate and add the value
body {
background: #ccc
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2 {
position: relative;
}
.box1 {
transform: rotateZ(45deg);
position: absolute;
width: 20%;
height: 20px;
background-color: aqua;
}
<div class="box effect2">
<div class="box1"></div>
</div>
Here are some posible values
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
SOURCE
rotate3d, where supported, needs parameters, example:
transform: rotate3d(1, 2.0, 3.0, 10deg)
body {
background: #ccc
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2 {
position: relative;
}
.box1 {
transform: rotate3d(1,2.0,3.0,90deg);
position: absolute;
width: 20%;
height: 20px;
background-color: aqua;
}
<div class="box effect2">
<div class="box1"></div>
</div>
You need to adapt to different browsers.
.class {
-webkit-transform:rotate(deg);
-moz-transform:rotate(deg);
-o-transform:rotate(deg);
transform:rotate(deg);
}