Here’s a tricky one…
I have a div, the contents of which should change on hove over on any part of it.
Here’s a pic detailing both wanted states:
And here is best effort, so far:
codepen
..it needs a bit of work.
Any help much appreciated!
Here's the HTML so far:
<div class="item green">
<a href="#">
<h4>Welcome</h4>
<p>Click here to find out more</p>
<img src="http://www.veropixel.com/res01-170w115h.jpg"/>
</a>
</div> <!-- /item -->
So there's my solution http://codepen.io/anon/pen/mIrvA :
$resinGreen: #00a14a;
.green { background: $resinGreen; }
.item {
width: 300px;
margin-bottom: 5px;
a {
display: block;
height: 98px;
overflow: hidden; /* cancels img float */
text-decoration: none;
h4, p {
height: 98px;
line-height: 98px; /* Two lines added to center
vertically text of course you can use display:inline-block
with vertical-align:middle */
padding-left: 15px;
margin:0;
}
img {
float: right;
height: 98px;
}
p {
display: none;
}
&:hover {
h4, img { display: none; }
p { display: block; }
}
}
}
Your problem was that your link haven't a height so it's why it was blinking, i also moved img to the first place for floating
If using just images within the div this bit of jquery will do it:
$('#applyimg').hover(function(){
$(this).attr('src','/design/sendcv_over.png');
},function(){
$(this).attr('src','/design/sendcv.png');
});
HTML
<img id='applyimg' src='/design/sendcv.png'>
Mouseover the image will swop it's source
Related
I am attempting to tile a webpage with div elements of various sizes. However, I am running into an issue with once x number of div elements have filled the width of the screen the following div is placed below the previous 'row', rather than being floated to fit into space between elements in the previous 'row'. The code below better demonstrates what I mean; I'd like the 'game' div to be floated to fit into the space above where it is currently positioned.
h1 {
color: white;
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
display: inline-block;
}
.default {
margin: 1em;
float: left;
}
/* For hover text */
.hover_img {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.hover_img h4 {
color: white;
}
.hover_img:hover img {
opacity: .2;
}
.hover_img:hover .center_text {
display: block;
}
.center_text {
position: absolute;
top: 50%;
left: 0;
display: none;
font-weight: bold;
text-align: center;
}
img {
margin: 0;
}
.rectangle-tile-horizontal {
height: 15em;
width: 35em;
}
.red {
background-color: rgba(255, 63, 63, 0.8);
}
#game, #game img {
width: 30em;
height: 30em;
}
#app, #app img {
width: 40em;
height: 35em;
}
<div class="container">
<div class="rectangle-tile-horizontal red center default">
<h1><b>Projects</b></h1>
</div>
<div class="rectangle-tile-horizontal hover_img default" id="app">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Web App</h4></div>
</div>
<div class="hover_img default" id="game">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Breakout</h4> </div>
</div>
I'm afraid what you want to do is actually re-order your divs to create a space-filling layout. To the best of my knowledge, using only CSS for this is difficult, if not outright impossible.
I suggest you take a look at this SO post, or perhaps even the Bulma framework is what you want.
If, however, you move away from re-ordering the containers automagically and instead look towards a solution that elastically adapts the width of each container to fill the available space while maintaining its "order" (first, second, third), I am sure CSS will be a viable solution. If you require assistance, please use the search or ask anew.
Create a style for your div class or id like
.className
{display:inline;}
and use it in your each div
Hope this will help you
An example of this
http://jsfiddle.net/JDERf/
I have a text inside the div with class message, and I want to move the div to vertical center with respect to parent div with class banner.
Please refer the JsFiddle here - https://jsfiddle.net/1rbhuwfs/
Whenever I try to set margin-bottom, it goes increasing beyond the parent div indefinitely, which I don't understand why. The parent div has display: block on it.
I prefer not to have any position: absolute in my code.
Thanks in advance.
Check below snippet, I have added
.banner > div {
vertical-align:middle;
}
and removed margin-bottom: 40px; form .message.
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.banner > div {
vertical-align:middle;
}
.img-1-holder {
display: inline-block;
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
display: inline-block;
}
.img2 {
height: 100px;
}
.message {
display: inline-block;
}
<div class="banner">
<div class="img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="message">
Some random text here
</div>
<div class="img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
Check jsfiddle, put parent to display:table and child to display: table-cell and vertical-align: middle.
https://jsfiddle.net/ggq39acr/
You can refer this too. https://www.w3.org/Style/Examples/007/center.en.html
The solutions suggest in this link works in general ! :D
One way to vertically center without position: absolute or using tables - and respecting your margin-bottom on image and text-div - is to use flexbox:
Add/change this:
.banner {
display: flex;
align-items: center;
}
https://jsfiddle.net/5496yk1k/
you can use flexbox fiddle
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: flex;
justify-content: center;
align-items: center;
}
In this case you can remove the margins on
.img1 {
height: 70px;
}
.message {
display: inline-block;
}
You can try to include a common class suppose img-inline with inline css properties and manage other css properties in your classes .img-1-holder, .img-2-holder and .message
Here is a sample code for you. You can try it in your jsfiddle. Sorry I am not posting fiddle link here.
HTML CODE
<div class="banner">
<div class="img-inline img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="img-inline message">
Some random text here
</div>
<div class="img-inline img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
CSS CODE:
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.img-1-holder {
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
margin-left: 15px;
}
.img2 {
height: 100px;
}
.img-inline {
display: inline-block;
vertical-align: middle;
}
Hope this helps :)
I have the following html code:
<div class="project">
<h3 class="black product">Dash</h3>
view project
</div>
<div class="project">
<h3 class="black product">5/3/1</h3>
view project
</div>
and the following css code:
.hide {
display: none;
}
div.project:hover h3{
line-height: 200px;
}
div.project:hover .hide {
display: inline-block;
}
div.project {
display: inline-block;
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
border: 2px solid #222;
margin: 0px 20px 20px 20px;
}
h3.product { font-size: 24px; line-height: 300px;}
Which is basically just two div buttons side by side. When I hover over each div the product title moves up and the "view product" text appears.
However when I quickly hover between the two divs they "jitter" up and down, and stay "jittered". From what I have seen, this occurs in Safari but not in Chrome.
http://jsfiddle.net/f8Laktoz/ Here is the jsfiddle.
This is my first time asking a question, so let me know if I can be more specific. Any help is appreciated! Thanks in advance.
Its seems to be a bug with the way the divs are 'displacing' each other on hover.
Try adding this to your css:
div.project {
...
float: left;
}
Working JS fiddle: http://jsfiddle.net/f8Laktoz/1/
I'm trying to hide and show a table row using css-tables and pure JavaScript (No jQuery).
I've got a div with the display set to table-row and a nav inside of it. No matter what I do, border-collapse etc, the div still maintains some of it's height.
Any ideas?
HTML:
<!-- Header -->
<header id='header'> <!-- Table Row 1 -->
<div id="header-table">
<div id='back'>
<button id='back-button'>←</button>
</div>
<div id="title">
<h1 id='title-h1'>Title</h1>
</div>
<div id="menu">
<button id='menu-button'>≡</button>
</div>
</div>
</header>
<nav id="menu-nav">
Introductory Page
Activity List
Settings
About
</nav>
<div id="body"> <!-- Table Row 3 -->
<div id="wrapper">
CSS
header#header {
position: relative;
display: table-row;
}
div#menu-nav-cell {
position: relative;
display: table-row;
text-align: center;
overflow: hidden;
background: yellow;
}
nav#menu-nav {
display: table-row;
height: 0em;
width: 100%;
color: #000;
background: pink;
}
div#body {
position: relative;
display: table-row;
height: 100%;
}
div#wrapper {
position: relative;
height: 100%;
}
Why not simply using display: none?
Maybe I misunderstood, since you said you have a div with a nav inside, but I cannot see that in your html sample.
I think you want to show/hide the navigation. This can be done by adding this css rule:
nav#menu-nav.hidden {
display: none;
}
and javascript
document.getElementById("toggle").onclick = function () {
document.getElementById("menu-nav").classList.toggle("hidden");
}
jsFiddle
If you want to animate the height, you can do this:
/* new rules that I added */
nav#menu-nav {
line-height: 1em;
-webkit-transition: line-height .2s, background-color .2s;
}
nav#menu-nav a {
display: inline-block;
overflow: hidden;
height: 1em;
-webkit-transition: height .2s;
}
nav#menu-nav.hidden {
line-height: 0em;
background-color: transparent;
}
nav#menu-nav.hidden a {
height: 0;
}
The trick is to use overflow: hidden; display:inline-block for the table cells, instead of display:table-cell.
This way, changing the height and line-height to zero works fine.
However there is still some height (around 3px) still visible, so I decided to animate the background-color to transparent as well. If you comment that part that animates the background color, you will understand what I mean.
jsFiddle v2
Example
There is a margin-bottom set for each sidebar-block of 10px, it appears as the inner div which is sidebar-block.body is flowing out of the container.
I researched and debugged and cannot find the cause for this, the only time I use floats is on the main #sidebar itself.
HTML
<div id="sidebar">
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">profile</div></div>
<div class="sidebar-block body"></div>
</div>
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">forum activity</div> </div>
<div class="sidebar-block body"></div>
</div>
</div>
CSS
#sidebar {
float: right;
width: 268px;
margin-top: 10px;
}
.sidebar-block {
margin-bottom: 10px;
}
.sidebar-block.title {
background-color: #2E392F;
min-height: 47px;
color: white;
font-size: 1.2em;
}
.sidebar-block.body {
overflow: hidden;
background-color: white;
}
.text-with-margin {
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
display: block;
}
Fixed, it was because I used .sidebar-block title, .sidebar-block body in a way so that the css for .sidebar-block would automatically be applied to them, not my intention so I renamed the divs.
According to your comment. Change your code for that
#sidebar > .sidebar-block
{
margin-bottom: 10px;
}
Demo: http://jsfiddle.net/fvjw5/1/
You have to set the maximum width of the Sidebar element.
As it is, the Sidebar element does not have a fixed size, which will nullify the
.text-with-margin {
width: 100%; // The width. You should change this.
...
}
See this post for information about position: CSS Positions
You should try something like:
#sidebar {
width: 100%; // Or whatever size you want the sidebar to be.
position: relative; // You can play with this for different results.
...
}
You can look at the information provided on the answer below:
Responsive web design