why when the mouse hover over the image the text do not show ?
how to get the visibility of the text using visibility property in css
img{
margin-top: 110px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 50px;
position: relative;
}
.txt{
font-size: 16px;
line-height: 20px;
margin-top: 10px;
text-align: center;
margin-left: 440px;
margin-right: 440px;
visibility: hidden;
}
img:hover .txt{
cursor: pointer;
visibility: visible;
}
<div class="container">
<img src="empty-boxes.svg" style="width:520px;height:190px;">
<p class="number">404</p>
<p class="txt">When communicating via HTTP, the server is required
.</p>
</div>
Add the CSS "~" selector.
img {
margin-top: 110px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 50px;
position: relative;
}
.txt {
font-size: 16px;
line-height: 20px;
margin-top: 10px;
text-align: center;
margin-left: 440px;
margin-right: 440px;
visibility: hidden;
}
img:hover ~ .txt {
cursor: pointer;
visibility: visible;
}
<div class="container">
<img src="empty-boxes.svg" style="width:520px;height:190px;">
<p class="number">404</p>
<p class="txt">When communicating via HTTP, the server is required .
</p>
</div>
You can also change the opacity of the text when hover on image
.txt {
opacity: 0;
}
img:hover~ .txt{
opacity: 1;
}
I recommend you to hover on the image container instead of the image itself. You can add transition on .txt to make it good looking.
Related
and I'm trying to add a black container below my video and add the title and description inside that black container on hover, but the description in overlapping the black container how to l keep it inside the black container.
.previewContainer.small {
position: relative;
width: 230px;
height: 129px;
margin-right: 4px;
display: inline-flex;
transition: 0.5s ease;
overflow: hidden;
white-space: nowrap;
flex: 1 1 0px;
transition: transform 500ms;
}
.title{
display: none;
}
.previewContainer.small:focus-within,
.previewContainer.small:hover{
margin-left: 65px;
transform: translateY(-50%) translateX(-50%);
z-index: 1;
width: 230px;
height: 250px;
background-color: #141414;
border-radius: 5px;
}
.small:focus ~ .small,
.small:hover ~ .small {
transform: translateX(25%);
}
.previewContainer.small:focus,
.previewContainer.small:hover {
transform: scale(1.6);
z-index: 1;
}
.Play{
position: absolute;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 10px;
padding: 0px;
transition-duration: 1s;
}
.title{
position: absolute;
text-transform: capitalize;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 5px;
transition-duration: 1s;
}
.description{
position: absolute;
display: flex;
padding-top: 30px;
margin-left: 10px;
background-color: transparent;
text-decoration:none;
overflow: hidden;
color: white;
}
.title h6{
color:#fff !important;
font-weight: 300;
font-size: 14px;
}
.video-item {
position: relative;
max-width: 100%;
transition: transform 0.2s;
z-index: 1;
cursor: pointer;
border-radius: 4px;
object-fit: cover;
}
<div class="previewContainer">
<div class="previewContainer small">
<a href"">
<video class="mylist-img video-item" onmouseover="this.play()" onmouseout="this.pause();">
<source src="https://sgcholdings.co.za/Backend/media/sample-30s.mp4">
Your browser does not support the video tag.
</video>
<div class="title">
<h6>Video One</h6>
</div>
<div class="description">
<p class="">Loren ipsum dolor sit amet because there are two,
there is web version which works on hover with a small pop up then </p>
</div>
</a>
</div>
</div>
so l want to contain the description to be inside that black background that comes when l hover. can someone assist how to contain the paragraph tag not to overlap
You can update your CSS with following code
.description {
white-space: normal;
}
white-space:normal Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
In the CSS for div of class description add this rule
.description{
word-wrap: break-word;
}
CSS word-wrap property is used to break the long words and wrap them onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box.
.previewContainer.small {
position: relative;
width: 230px;
height: 129px;
margin-right: 4px;
display: inline-flex;
transition: 0.5s ease;
flex: 1 1 0px;
transition: transform 500ms;
}
.title{
display: none;
}
.previewContainer.small:focus-within,
.previewContainer.small:hover{
margin-left: 65px;
transform: translateY(-50%) translateX(-50%);
z-index: 1;
width: 230px;
height: 300px;
background-color: #141414;
border-radius: 5px;
word-wrap: break-word;
}
.small:focus ~ .small,
.small:hover ~ .small {
transform: translateX(25%);
}
.previewContainer.small:focus,
.previewContainer.small:hover {
transform: scale(1.6);
z-index: 1;
}
.Play{
position: absolute;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 10px;
padding: 0px;
transition-duration: 1s;
}
.title{
position: absolute;
text-transform: capitalize;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 5px;
transition-duration: 1s;
}
.description{
position: absolute;
display: flex;
padding-top: 30px;
margin-left: 10px;
background-color: transparent;
text-decoration:none;
overflow: hidden;
color: white;
word-wrap: break-word;
}
.title h6{
color:#fff !important;
font-weight: 300;
font-size: 14px;
}
.video-item {
position: relative;
max-width: 100%;
transition: transform 0.2s;
z-index: 1;
cursor: pointer;
border-radius: 4px;
object-fit: cover;
}
<div class="previewContainer">
<div class="previewContainer small">
<a href"">
<video class="mylist-img video-item" onmouseover="this.play()" onmouseout="this.pause();">
<source src="https://sgcholdings.co.za/Backend/media/sample-30s.mp4">
Your browser does not support the video tag.
</video>
<div class="title">
<h6>Video One</h6>
</div>
<div class="description">
<p class="">Loren ipsum dolor sit amet because there are two,
there is web version which works on hover with a small pop up then </p>
</div>
</a>
</div>
</div>
I have a button with the text "Description" that in IE is not clickable. Well, actually the far right edge of it is clickable, but not the whole button and text content of the button. It works fine in modern browsers (Chrome, Firefox), but not in IE. I am using IE 11 for testing. What is causing this and how do I fix it?
I've tried to strip out as much as possible...
.vertical-button {
width: 1px;
height: 20px;
background: #000;
position: absolute;
right: -68px;
top: calc(50% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.vertical-button {
right: -100px;
}
.project--active .vertical-button {
opacity: 1;
}
.project__image,
.project__text {
position: relative;
width: 100%;
max-width: 408px;
margin: 20px auto;
margin-bottom: 0px;
}
.project__text {
height: 200px;
padding: 8px;
}
.project__image,
.project__text {
width: 280px;
height: 210px;
display: inline-block;
margin: 0 auto;
}
.project__text {
padding-top: 20px;
padding-left: 20px;
}
.project {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 18px;
margin: 30px auto;
width: 614px;
height: 246px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
.project {
padding: 20px;
width: 740px;
height: 295px;
}
.l-wrapper {
position: relative;
width: 86%;
max-width: 1024px;
margin: 0 auto;
}
.l-wrapper {
width: 80%;
}
.l-clear::after,
.l-wrapper::after {
clear: both;
content: "";
display: block;
height: 0px;
visibility: hidden;
}
.l-section {
padding: 30px 0;
}
.l-section__bg {
background-color: #F2F2F2;
}
.l-container {
position: relative;
padding-bottom: 50px;
overflow: hidden;
background-color: #FFFFFF;
z-index: 99;
}
.vertical-button__btn,
.vertical-button__btn:focus,
.vertical-button__btn:active {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
position: absolute;
top: 0px;
transform-origin: left top;
transform: rotate(90deg) translateX(-32%);
float: right;
padding: 5px;
cursor: pointer;
cursor: hand;
}
.vertical-button__stroke {
width: 1000px;
height: 1px;
background: #000;
}
<div id="app">
<div data-reactroot="">
<div class="l-container">
<div class="l-section l-section__bg">
<div class="l-wrapper">
<div class="project project--active">
<div class="project__image"></div>
<div class="project__text">
<h3 class="project__heading">Title</h3>
<div class="vertical-button">
<button class="vertical-button__btn">Description</button>
<div class="vertical-button__stroke"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit
I have found that if I remove this piece of HTML the button becomes clickable...
<div class="project__image"></div>
But this still doesn't help me understand why it's happening or how to fix it! I cannot actually remove that div in the real project.
I don't have IE to test, but I can tell you some ideas from my experience.
1. Check if another element is overlapping your button.
Being IE, it may handle CSS differently, hence overlapping. Since removing that image class div resolves the problem, I'd guess this would be the cause of the problem.
2. Validate the HTML.
Forgetting to close tags can create very, very bizarre bugs, also difficult to find.
3. Try turning that button into an anchor <a>
There could be browsers who won't handle the click event properly.
4. Stop using IE :)
At least use Edge.
Hi Im trying to add a hover to my gallery images but I think somewhere some code is preventing it from working. Cant work out what it is though. Help would be awesome. Im just pasting html for the first image
<div class="images">
<h1>Work</h1>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="images/thumb_diesel.jpg">
<img src="images/thumb_diesel.jpg" alt="Diesel Car">
<div class="overlay">
<h6>Diesel Car</h6>
<div class="view">View Case Study</div>
</div>
</a>
</div>
</div>
.images {
width:78%;
margin-left: auto;
margin-right: auto;
}
.gallery {
position: relative;
}
div.gallery img {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.8);
}
.overlay:hover .overlay {
opacity: 1;
}
h6 {
text-align: center;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 45px;
color: #fff;
line-height: 1px;
padding-top: 30px;
}
.view {
text-align: center;
font-family: 'Raleway', sans-serif;
font-weight: 700;
line-height: 1px;
border-color: #fff;
border: 5px;
padding: 30px;
margin-left: 90px;
margin-right: 90px;
color: #fff;
font-size: 20px;
}
Thanks
Steve
.gallery:hover .overlay {
opacity: 1;
Please checkout JS Bin
To make the hover work you need to change the following code in your css:
.overlay:hover .overlay {
opacity: 1;
}
to:
.overlay:hover {
opacity: 1;
}
If you want the text "Diesel Car" to be displayed when someone hovers over the image then you need to add the title attribute to the img tag.
Thus your img tag would be like:
<img src="images/thumb_diesel.jpg" alt="Diesel Car" title="Diesel Car">
The alt attribute doesn't work on some webkit-based browsers.
I'm trying to achieve this layout:
I have this:
<div class="button-wrapper">
<button>
<i></i>
</button>
<label>Carregamento Telemóvel</label>
</div>
My label has to be absolute positioned because it can't take space in the div. The div has to be the width of the button.
Any ideas?
EDIT: Sorry guys, my question was done in a little bit of hurry, so it was incomplete. I will now explain detailed.
I need all the div's to be responsive and don't have a fixed width.
The button itself it's contained in a row with others button's with the same layout.
The button's have to have the same margin between them, that's why I can't have the label with with because the length of the text it's never the same so the div's will have different sizes, and then I can't give the same margin between them.
Solution:
http://plnkr.co/edit/NYOb3uQnYrNFkfO6RaIG?p=preview
The plunker just works in -webkit- but it's all I need.
The trick to centering the label is a CSS3 transform
.button-wrapper label {
position: absolute;
top:100%;
left: 50%;
transform:translateX(-50%);
color: orange;
font-weight: bold;
}
body {
text-align: center;
}
.button-wrapper {
display: inline-block;
margin: 1em;
position: relative;
}
.button-wrapper i {
font-size: 72px;
background: orange;
line-height: 1.4em;
width: 1.4em;
border-radius:50%;
display: block;
}
.button-wrapper label {
position: absolute;
top:100%;
left: 50%;
transform:translateX(-50%);
color: orange;
font-weight: bold;
}
<div class="button-wrapper">
<i>K</i>
<label>Carregamento Telemóvel</label>
</div>
.button-wrapper {
display: inline-block;
max-width: 80px;
text-align: center;
}
.button-wrapper > button {
border-radius: 50%;
height: 40px; width: 40px;
background-color: orange;
position: relative;
border: 0 none;
display: inline-block;
}
.button-wrapper > button > i {
display: block;
height: 10px;
width: 10px;
background-color: #ffffff;
margin-top: -5px;
margin-left: -5px;
left: 50%;
top: 50%;
position: absolute;
}
.button-wrapper > label {
display: block;
font-size: 11px;
color: orange;
}
<div class="button-wrapper">
<button>
<i></i>
</button>
<label>Carregamento Telemóvel</label>
</div>
Without seeing your code, it's difficult to help you. But you can center an absolute positioned block element by combining margin:0 auto; left:0; right:0;
JSFiddle - http://jsfiddle.net/vfs3n68e/
Here's a very simple way to do it that I've created quickly: https://jsfiddle.net/rn8ysg5q/
HTML:
<div class="button-wrapper">
<button>
<i></i>
</button>
<br />
<label>Carregamento Telemóvel</label>
</div>
CSS:
.button-wrapper
{
/*border: 1px dotted red;*/
color: orange;
width: 100px;
position: relative;
text-align: center;
}
/* Reset button layout */
.button-wrapper button
{
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-appearance: button; /* for input */
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
.button-wrapper button
{
width: 60px;
height: 60px;
background-color: orange;
border-radius: 50%;
}
If that's what you're looking for I'll update it once I'm home in an hour and make some improvements.
I'm looking for a CSS only solution to fade an image in a back DIV when hovering over any section of the DIV, including DIVs that are in front of it.
Here is what I've been able to build so far: http://jsfiddle.net/kqo10jLb/
The CSS:
#caseouter {
position: relative;
top: 0px;
}
#casewrap2 {
background-color: #000;
}
#casetitle {
font-size: 30px;
width: 100%;
display: block;
text-transform: uppercase;
text-align: center;
padding: 10px 0px 0px 0px;
color: #fff;
margin-bottom: 0px;
}
#casethumb {
width: 100%;
display: block;
margin-bottom: -100px;
opacity: 1;
transition: .2s opacity ease .2s;
height: 100px;
}
#casesecondline {
font-size: 30px;
color: #666;
text-transform: uppercase;
margin: 0 auto;
display: block;
width: 100%;
text-align: center;
color: #fff;
margin-top: -10px;
padding: 0px;
}
#casethumb img {
width: 100%;
}
#casethumb:hover {
opacity: .75;
}
#casetitle:hover ~ #casethumb a {
opacity: .75;
}
#casesecond:hover ~ #casethumb a {
opacity: .75;
}
And the HTML:
<div id="casewrap2">
<div id="casethumb">
<a href="www.google.com">
<img src="http://ringer.tv/wp-content/uploads/2014/08/case_bravo.jpg">
</a>
</div>
</div>
<div id="caseouter">
<a href="www.google.com">
<div id="casetitle">Headline</div>
<div id="casesecondline">Subheadline</div>
</a>
</div>
As you'll see, the back image fades on hover, however, it will not fade when I hover over the headline and subheadline text. I've tried using #casetitle:hover ~ #casethumb a but I'm obviously doing something wrong. Thanks!
Is this what you're after? http://jsfiddle.net/kqo10jLb/1/
I moved the caseouter into the casewrap2 object and changed the hover to this:
#casewrap2:hover #casethumb {
opacity: .75;
}