I've definitely never identified myself as a coder, which is why I need some help. I've tried & tried to get a grid of shapes with text overlayed to change to different text whenever the mouse is hovering over it - completely different text. I looked up before & after properties but still can't get it right because of the "grid" css.
I'm hoping to have "name" on the normal shape, and then other text on the hovered shape for more information. How would I go about doing this? I've supplied a fiddle to show everything.
http://jsfiddle.net/6c4v2ypv/3/
Thank you all tremendously for your help.
CSS
.grid {
width: 100%;
max-width: 900px;
margin: 0 auto;
background: #fff;
}
.grid::after {
content: "";
display: block;
clear: both;
}
.grid-item {
width: 21.833%;
padding-bottom: 21.833%;
overflow: hidden;
float: left;
background: #BBB;
transform: rotate(45deg);
margin: 5.5%;
margin-top: -11%;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
margin-top: 5%;
}
.grid-item:nth-child(5n+4) {
margin-left: 21.9%;
}
.grid-item:nth-child(5n+6) {
clear: left;
}
.grid-item:nth-child(5n+6):last-of-type {
margin-left: 38.25%;
}
.grid-item:hover {
background: #000;
}
.grid-inner {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-45deg);
text-align: center;
padding-top: 40%;
font-size: 1em;
}
.grid-inner:hover a span {
display: none;
}
.grid-inner:hover:after {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-45deg);
text-align: center;
padding-top: 40%;
font-size: 1em;
background-color: black;
}
Maybe so?
.grid {
width: 100%;
max-width: 900px;
margin: 0 auto;
background: #fff;
}
.grid::after {
content: "";
display: block;
clear: both;
}
.grid-item {
width: 21.833%;
padding-bottom: 21.833%;
overflow: hidden;
float: left;
background: #BBB;
transform: rotate(45deg);
margin: 5.5%;
margin-top: -11%;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
margin-top: 5%;
}
.grid-item:nth-child(5n+4) {
margin-left: 21.9%;
}
.grid-item:nth-child(5n+6) {
clear: left;
}
.grid-item:nth-child(5n+6):last-of-type {
margin-left: 38.25%;
}
.grid-item:hover {
background: #000;
}
.grid-inner {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-45deg);
text-align: center;
padding-top: 40%;
font-size: 1em;
}
.grid-inner:hover a span {
display: none;
}
.grid-inner:hover:after {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-45deg);
text-align: center;
padding-top: 40%;
font-size: 1em;
background-color: black;
}
.grid-inner-hover {
opacity: 0;
}
.grid-item:hover .grid-inner-hover {
opacity: 1;
color: #fff;
}
<div class="grid">
<div class="grid-item">
<div class="grid-inner">Name 1</div>
<div class="grid-inner grid-inner-hover">Name 1 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 2</div>
<div class="grid-inner grid-inner-hover">Name 2 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 3</div>
<div class="grid-inner grid-inner-hover">Name 3 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 4</div>
<div class="grid-inner grid-inner-hover">Name 4 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 5</div>
<div class="grid-inner grid-inner-hover">Name 5 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 6</div>
<div class="grid-inner grid-inner-hover">Name 6 Hover</div>
</div>
</div>
here's a simple example:
.item1:hover span, .item2:hover span{
display: none;
}
.item1:hover:after{
content: 'ADD';
}
.item2:hover:after{
content: 'Subtract';
}
<div class="item1">
<span >first</span>
</div>
<div class="item2">
<span>second</span>
</div>
You can also add something like this in your css:
.grid-inner:hover:after{
content:'hello';
color:#fff;
transform:rotate(0deg);
}
http://jsfiddle.net/6c4v2ypv/5/
Related
I have two sticky boxes. On hovering over a particular area inside the sticky boxes a popup opens. I want these popups to appear always on top of the sticky boxes. But increasing the z index of one hides the other. Any solution ?
Note - Removing sticky from the boxes and keeping z index of both the box same solves the problem but I need the boxes to be sticky.
.box {
margin: 40px;
padding: 20px;
background: yellow;
border: 1px solid red;
position: sticky;
}
.innerBox {
width: 100px;
height: 50px;
background: lightgreen;
position: relative;
}
.popup1 {
position: absolute;
width: 50px;
height: 150px;
top: 25px;
left: 35px;
background: red;
display: none;
}
.popup2 {
position: absolute;
width: 50px;
height: 150px;
bottom: 25px;
left: 35px;
background: black;
display: none;
}
.box1:hover .popup1 {
display: block;
}
.box2:hover .popup2 {
display: block;
}
.boxUp {
z-index: 3;
}
.boxDown {
z-index: 3;
}
<div>
<div class="box boxUp">
<div class="innerBox box1">
<p>
Hover Here
</p>
<div class="popup1">
</div>
</div>
</div>
<div class="box boxDown">
<div class="innerBox box2">
<p>
Hover Here
</p>
<div class="popup2">
</div>
</div>
</div>
</div>
Set the z-index on hover the .box
.box {
margin: 40px;
padding: 20px;
background: yellow;
border: 1px solid red;
position: sticky;
}
.innerBox {
width: 100px;
height: 50px;
background: lightgreen;
position: relative;
}
.popup1 {
position: absolute;
width: 50px;
height: 150px;
top: 25px;
left: 35px;
background: red;
display: none;
}
.popup2 {
position: absolute;
width: 50px;
height: 150px;
bottom: 25px;
left: 35px;
background: black;
display: none;
}
.box1:hover .popup1 {
display: block;
}
.box2:hover .popup2 {
display: block;
}
.box:hover {
z-index: 2;
}
<div>
<div class="box boxUp">
<div class="innerBox box1">
<p>
Hover Here
</p>
<div class="popup1">
</div>
</div>
</div>
<div class="box boxDown">
<div class="innerBox box2">
<p>
Hover Here
</p>
<div class="popup2">
</div>
</div>
</div>
</div>
I want my html content to be center aligned, while maintaining the column structure of id game-inst
please feel free to edit my css code, waiting for your help, thanks
#score-container {
display: block;
width: 100%;
height: 100%;
text-align: center;
background-color: #1B2631;
color: #ffffff;
}
.key {
width: 40%;
display: inline-block;
}
.instruction {
display: inline-block;
width: 40%;
text-align: left;
}
#my-score,
#high-score,
#game-inst {
font-size: 1.25em;
padding: 0px 10px;
line-height: 1;
}
<div id="score-container">
<div id="game-inst">
<div class="key">Key 4:</div>
<div class="instruction">Move UP</div>
<div class="key">Key 6:</div>
<div class="instruction">Move DOWN</div>
<div class="key">Key 5:</div>
<div class="instruction">PLAY/PAUSE</div>
</div>
<p id="my-score">123</p>
<p id="high-score">786</p>
</div>
I believe this is what you want.
#score-container {
top: 100px;
display: block;
position: relative;
left: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 10;
}
.key {
width: 30%;
display: inline-block;
float: left;
}
.instruction {
width: 70%;
display: inline-block;
float: left;
}
#score-box {
position: relative;
width: 300px;
margin-left: auto;
margin-right: auto;
padding: 0;
}
#game-inst:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#my-score,
#high-score,
#game-inst {
font-size: 1.25em;
padding: 0px 10px;
line-height: 1;
text-align: left;
}
#score-box p {
width: 42%;
display: inline-block;
text-align: left;
border: solid 1px silver;
}
<div id="score-container">
<div id="score-box">
<div id="game-inst">
<div class="key">Key 4:</div>
<div class="instruction">Move UP</div>
<div class="key">Key 6:</div>
<div class="instruction">Move DOWN</div>
<div class="key">Key 5:</div>
<div class="instruction">PLAY/PAUSE</div>
</div>
<p id="my-score">123</p>
<p id="high-score">786</p>
</div>
</div>
Note the changes in .key, .instruction, #game-inst and the addition of #game-inst:after
#game-inst:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Which clears the floats added to the key and instruction classes.
I created a layout with 4 columns centered with margin and a triangle as an arrow-down with a star in the middle...
this is working nice in my computer:
But triangle and star are far away to be responsive, only way I achieved to position it correctly is with absolute position:
.triangle-down {
display: block;
position: absolute;
top: 0;
left: 318px;
width: 0;
height: 0;
border-left: 532px solid transparent;
border-right: 532px solid transparent;
border-top: 400px solid blue;
}
.star {
display: block;
position: absolute;
vertical-align: middle;
font-size: 250px;
text-align: center;
color: white;
top: -434px;
left: -109px;
}
How can I put the element in top of the others and make it responsive in the same way columns and it's margins?
NOTES:
layout is a countdown, but javascript is not important for the question.
You can find a functional (no JS) fiddle here
You can see actual result (with JS) here
I can use sass if necessary
How about this updated fiddle?
https://jsfiddle.net/ondrakoupil/0rtvcnon/11/
Basically, these are the changes:
use flexbox for column layout
sizes are measured using viewport-relative units (vw)
triangle is created as standard rectangular <div> and rotated via CSS - you have better control over its position and size
There are some CSS3 techniques used. For IE, you'll need to prefix them in CSS (use Autoprefixer). Other browsers should handle it "as it is".
html, body {
height: 100%;
margin: auto;
padding-left:1%;
background: yellow;
font: normal 16px 'Roboto', sans-serif;
}
.container {
margin: auto;
width: 80%;
height: 100%;
position: relative;
display: flex;
justify-content: space-between;
}
.bar {
background: red;
font-weight: 700;
text-align: center;
color: yellow;
width: 15%;
}
.init {
position:absolute;
bottom: 10px;
right: 20px;
background: yellow;
margin-left: 0px;
font-weight: 700;
text-align: right;
color: red;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
::-moz-selection {
color: yellow;
background: red;
}
::selection {
color: yellow;
background: red;
}
p.numbers {
font-size: 8vw;
margin-top: 45vw;
margin-bottom: 20px;
}
p.meta, p.strings {
font-size: 2vw;
}
h1 {
font-size: 4.5em;
}
.triangle-down {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
}
.triangle-color {
margin: auto;
width: calc(80vw / 1.4142);
height: calc(80vw / 1.4142); /* sqrt of 2 */
background-color: blue;
transform: translateY(calc(-1 * 80vw / 1.4142 / 2)) rotate(45deg);
}
.star {
position: absolute;
vertical-align: middle;
font-size: 15vw;
text-align: center;
color: white;
top: 5vw;
left: 0;
right: 0;
z-index: 1;
}
<body>
<div class="container">
<div class="triangle-down">
<div class="triangle-color"></div>
<div class="star">★</div>
</div>
<div class="bar">
<p id="d" class="numbers days">00</p>
<p class="strings">DIES</p>
</div>
<div class="bar">
<p id="h" class="numbers hours">00</p>
<p class="strings">HORES</p>
</div>
<div class="bar">
<p id="m" class="numbers minutes">00</p>
<p class="strings">MINUTS</p>
</div>
<div class="bar">
<p id="s" class="numbers seconds">00</p>
<p class="strings">SEGONS</p>
</div>
</div>
<div class="init">
ENTRA
</div>
</body>
Take a look at this. I was need to rewrite it from scratch, because you've got a lot of absolutes and they all calculated through js, as I understood. Hope, this will satisfy your requirements.
html, body {
margin: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background-color: yellow;
font: normal 16px 'Roboto', sans-serif;
position: relative;
}
.triangle-aspect-keeper {
width: 50%;
padding-bottom: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
}
.triangle-container {
}
.triangle-down {
width: 100%;
height: 100%;
background-color: blue;
transform: rotate(45deg);
position: absolute;
top: -50%;
left: 0;
}
.star {
font-size: 1100%;
text-align: center;
color: white;
width: 100%;
line-height: 200%; /* control star vertical position */
position: absolute;
top: 0;
left: 0;
}
.bar-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.bar-inner-container {
margin-left: auto;
margin-right: auto;
width: calc(50% * 1.41); /* sqrt(2) = 1.41. Length of the diagonal of the square*/
height: 100%;
display: flex;
justify-content: space-between;
}
.bar:first-child {
margin-left: 0;
}
.bar {
background-color: red;
height: 100%;
width: 15%;
color: yellow;
font-weight: 700;
}
p.numbers {
font-size: 5em;
margin-top: 350%;
}
p.meta, p.strings {
font-sie: 1.5em;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
.init {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
font-weight: 700;
}
<body>
<div class="container">
<div class="bar-container">
<div class="bar-inner-container">
<div class="bar bar-first">
<p id="d" class="numbers days">00</p><br>
<p class="strings">DIES</p><br>
</div>
<div class="bar bar-second">
<p id="h" class="numbers hours">00</p><br>
<p class="strings">HORES</p><br>
</div>
<div class="bar bar-third">
<p id="m" class="numbers minutes">00</p><br>
<p class="strings">MINUTS</p><br>
</div>
<div class="bar bar-fourth">
<p id="s" class="numbers seconds">00</p><br>
<p class="strings">SEGONS</p><br>
</div>
</div>
</div>
<div class="triangle-aspect-keeper">
<div class="triangle-container">
<div class="triangle-down"></div>
<div class="star">★</div>
</div>
</div>
<div class="init">
ENTRA
</div>
</div>
</body>
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
html,
body {
background: yellow;
height: 100%;
}
.container {
position: relative;
height: 100%;
}
.row {
height: 100%;
}
.col-xs-3 {
height: 100%;
}
.col-xs-3,
.col-xs-12 {
padding: 0 6.25%;
}
.bar {
color: yellow;
background: red;
min-height: 100%;
padding-top: 333%;
}
.triangle-down {
position: absolute;
width: 100%;
height: auto;
z-index: 1;
}
.triangle-color {
margin-bottom: -30%;
}
.triangle-color * {
fill: blue
}
.star * {
fill: white
}
.numbers {
font-size: 5vw;
padding-bottom: 2vw;
}
.strings {
font-size: 1.5vw;
}
<div class="container text-center">
<div class="row triangle-down">
<div class="col-xs-12">
<svg class="triangle-color" viewBox="0 0 100 40">
<polygon points="0,0 100,0 50,40"/>
</svg>
<svg class="star" viewBox="0 0 1400 188">
<polygon points="700,0 640,188 790,68 610,68 760,188"/>
</svg>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">DIES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">HORES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">MINUTS</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">SEGONS</div>
</div>
</div>
</div>
</div>
You can simply do this.
HTML:
<div class="parent">
<div class="triangle">
<div class="star">
...
</div>
</div>
</div>
CSS:
.parent {
width: xx%; /*Whatever percentage*/
height: yy%; /*Whatever percentage*/
margin: 0 auto;
position: relative;
}
.triangle {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.star {
font-size: xx%; /*some percentage (assuming star is a font icon)*/
position: absolute;
top: 15vh;
margin: 0 auto;
}
I've borrowed this (Accepted Answer) venn diagram script to do the obvious, However I'm struggling to get any text I put within the <div> to align center and valign middle. I've tried adding both into the CSS for div {} but this doesn't work. I tried display:table which did work, however this messed up the position of the rest of the circles. As you can see the number is at the top left of the outer1 div. I need it in the middle, and to be able to do the same for all 7 circles/overlaps
css:
.venn div {
width: 250px;
height: 250px;
border-radius: 50%;
pointer-events: none;
position: absolute;
text-align: center;
vertical-align: middle;
}
.venn.innerw {
left: 50px;
top: 0px;
overflow: hidden;
position: absolute;
/* border: solid; */
z-index: 20;
/* transform: translateZ(10px); */
pointer-events: none;
}
.venn.innerw2 {
margin-left: 0px;
top: 0px;
overflow: hidden;
position: static;
/* border: solid; */
/* z-index: 20; */
pointer-events: none;
}
.venn.innerw3 {
margin-left: 170px;
top: 0px;
overflow: hidden;
position: static;
/* border: solid; */
/* z-index: 20; */
pointer-events: none;
}
.venn.inner {
margin-left: -85px;
margin-top: 130px;
background-color: palegreen;
z-index: 20;
position: static;
pointer-events: auto;
}
.venn.inner:hover {
background-color: green;
}
.venn.mwrap {
position: absolute;
overflow: hidden;
pointer-events: none;
z-index: 10;
}
.venn.mwrap2 {
position: static;
margin-left: 0px;
margin-top: 0px;
overflow: hidden;
pointer-events: none;
}
.venn.mid {
position: static;
pointer-events: auto;
}
#midaw1 {
left: 50px;
top: 0px;
}
#mida {
left: 50px;
margin-left: 170px;
margin-top: 0px;
}
#midbw1 {
left: 220px;
top: 0px;
}
#midb {
margin-left: -85px;
margin-top: 130px;
}
#midcw1 {
left: 135px;
top: 130px;
}
#midc {
margin-left: -85px;
margin-top: -130px;
}
.venn.mid {
background-color: lightblue;
z-index: 15;
}
.venn.mid:hover {
background-color: blue;
}
#outer1 {
left: 50px;
top: 0px;
}
#outer2 {
left: 220px;
top: 0px;
}
#outer3 {
left: 135px;
top: 130px;
}
.venn.outer {
background-color: lightcoral;
z-index: 1;
pointer-events: auto;
}
.venn.outer:hover {
background-color: red;
}
Here's html
<div class="venn">
<div id="outer1" class="venn outer">
<?php echo $lp1; ?>
</div>
<div id="outer2" class="venn outer">
</div>
<div id="outer3" class="venn outer">
</div>
<div id="midaw1" class="venn mwrap">
<div id="midaw2" class="venn mwrap2">
<div id="mida" class="venn content mid"></div>
</div>
</div>
<div id="midbw1" class="venn mwrap">
<div id="midbw2" class="venn mwrap2">
<div id="midb" class="venn content mid"></div>
</div>
</div>
<div id="midcw1" class="venn mwrap">
<div id="midcw2" class="venn mwrap2">
<div id="midc" class="venn content mid"></div>
</div>
</div>
<div class="venn innerw">
<div class="venn innerw2">
<div class="venn innerw3">
<div class="venn inner">
</div>
</div>
</div>
</div>
</div>
OR if someone has a better alternative for a venn diagram with live php/mysql data then please fire it my way.
Many Thanks
Do it like this:
Markup
<div class="venn">
<div id="outer1" class="venn outer">
<p>Some text</p>
</div>
</div>
CSS
.venn.outer{
display: table;
text-align: center;
}
.venn.outer p{
display: table-cell;
vertical-align: middle;
}
Can anyone help me figure out what i'm doing wrong?
I want to insert the text inside "servicesTitle"in the middle of the image.
I have tried position, top, vertical align..and can't figure out what i'm doing wrong
<div class="services">
<p id="titleServices">Our Services</p>
<div class="servicesImages">
<div class="servicesImagesLeft">
<div id="cultureNews">
<div class="servicesTitle">Culture News</div>
<img src="/www/assets/newImages/services/190x136/Culture News1.jpg">
</div>
<div id="meetingPoint">
<div class="servicesTitle">Meeting Point</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
<div class="servicesImagesCenter">
<div id="gallery">
<img src="/www/assets/newImages/services/460x330/Gallery.jpg">
<div class="servicesTitleActive">Gallery</div>
</div>
</div>
<div class="servicesImagesRight">
<div id="profile">
<div class="servicesTitle">Profile</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
<div id="invitation">
<div class="servicesTitle">Invitation
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#clear {
clear: both;
}
.services {
height: 100%;
margin-left: 7.5%;
margin-right: 7.5%;
}
.services p#titleServices {
text-align: center;
color: #ffffff;
padding-top: 40px;
}
.services .servicesImages {
border: 1px solid #fff;
margin-top: 65px;
text-align:center;
}
.services .servicesImages .servicesImagesLeft {
width: 190px;
height: 136px;
margin-top: 20px;
float:left;
position: relative;
}
.services .servicesImages .servicesImagesCenter {
display: inline-block;
margin: 0 auto;
width: 460px;
height: 330px;
}
.services .servicesImages .servicesImagesRight {
width: 190px;
height: 136px;
margin-top: 20px;
float:right;
position: relative;
}
.servicesImagesLeft #cultureNews {
width: 100%;
height: 100%;
}
.servicesImagesLeft #meetingPoint {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesCenter #gallery {
width: 100%;
height: 100%;
}
.servicesImagesRight #profile {
width: 100%;
height: 100%;
}
.servicesImagesRight #invitation {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesLeft img, .servicesImagesRight img {
opacity: 0.7;
}
.servicesTitleActive {
text-align: center;
margin-top: 25px;
color: #fff;
}
.servicesTitle {
color: #fff;
}
.services p#titleServices {
Needs to be:
.services .servicesTitle {
.servicesTitle {
color: #fff;
width: 100%;
height:100%;
position: absolute;
top:60%;
left:auto;
z-index:2;
}
http://jsfiddle.net/uHY7C/