Only HTML/CSS solutions please
I'm working on an online art portfolio. On each page are a number of paintings, organized vertically. Pretty simple.
However, when the cursor hovers over each painting, I want some text to show, either causing the painting to fade a little bit, or the text can appear in a small text box that follows the cursor.
I would post the code I have now, but after much trial and error, I've stripped it back down to simply a div with the img inside of it.
You'll want to do some selector magic. See attached snippet and CodePen.
Next time, please post some of your attempted solutions. No one wants to just write your code for you.
img.fade:hover /* fade out on hover */ {
opacity:0.5;
}
img.fade + span /* hide spans immediately after images that are set to fade */ {
visibility:hidden;
}
img.fade:hover + span /* display spans immediately after :hover faded images */ {
visibility: visible;
}
<img class="fade" src="http://41.media.tumblr.com/d4473a971038c392b3e4ecb42e013784/tumblr_nlyfpjetVZ1tdg8rso7_500.jpg">
<span>Here is some Text</span>
See CodePen http://codepen.io/anon/pen/PPPqvM
Related
I'm trying to move letters individually from a word one-by-one to the right.
It should look like they're being pulled to that direction from the center.
Look at this pen (not mine, btw): https://codepen.io/egrucza/pen/LZdPeP .
It should be like that, except the word (in HTML) is there already and the letters should move to the right when the word is hovered on.
Now look what I've got so far in my pen: https://codepen.io/jenny0515/pen/wvpdKBz .
A piece here (but please click on my code pen link):
.content1 :hover {
text-align: right;
content: "Hair Clips";
}
.content2 :hover {
text-align: right;
content: "Make-up";
}
.content3 :hover {
text-align: right;
content: "Jewelry";
}
So, instead of the letters appearing from above or below, the word should be at the center of the row (as I have it in my code pen), and when at hover, the last letter of the word should move to the right, and the other letters by it should follow with a slight delay in between each first move.
How can I do that in CSS?
You need to break down the elements to animate them individually.
<div class="center">
<span class="one">M</span>
<span class="two">o</span>
<span class="three">v</span>
<span class="four">e</span>
In this CodePen I broke the letters down into spans and animate manually, there are other solutions you could use to clean up your CSS and handle the delays but this is quick and dirty.
https://codepen.io/duncanlutz/pen/XWVaBQY
I guess you need to understand the basics first. Therefore, a simple example showing the basic concepts only.
To explain:
Use single span elements for the letters (most important and already mentioned by others).
letter:hover should be clear.
The &:nth-of-type(4) part moves the 4th letter using translateX.
Two more things you should know:
The transition property in the example you have posted is a
shorthand, see here
To my understanding, moving all letters one by one on hovering a div would require keyframes.
Note: You can only move the fourth letter on hover with this example.
HTML
<div class="box">
<span class="letter">H</span>
<span class="letter">e</span>
<span class="letter">r</span>
<span class="letter">e</span>
</div>
CSS
$duration: 5s;
span {
display: inline-block;
}
.letter:hover {
&:nth-of-type(4) {
transform: translateX(200px);
transition-duration: $duration;
}
}
I have in a web-page repeated divs which are normally transparent, but are made opaque when the mouse hovers over their parent:
<div class="entry">
...
<div class="info">
some information text
</div>
</div>
div.info {
opacity: 0;
}
.entry:hover div.info {
opacity: 1;
}
I would now like to make that page searchable through the standard browser "find in page" functionality. That actually works, but if the found text is within such a div.info, it is obviously invisible, too.
Is there a way I can make my div visible not just on hover, but also if it contains found text? Or specify the style of found text, including that is is supposed to be visible?
I looked at the other CSS pseudo-classes, but none of them match my purpose. I also experimented with the pseudo-element ::target-text as an alternative to found text.
Do I have to do this via JavaScript?
I have created the following website http://www.nabresco.com from an html based theme.
Im definitely no expert in coding bit i figured my way out in order to edit it to my needs.
The website is up and running now and is looking good.
There is only one problem left that i cannot seem to figure out.
The pictures in the galleries are acting as if they are black and white and become coloured only when the cursor is on the actual selected picture. This is happening on some coputers and on others im viewing it normally (weird?).
I want to change them to all be colored all the time without having this black and white effect.
The code on the html for these pictures is as follows (showing first pic in the gallery code):
<div class="preloader">
<a class="bwWrapper single-image plus-icon" href="images/projects/al-rawi/5.png" rel="folio">
<img src="images/projects/al-rawi/5.png" alt="" >
</a>
This shows the pictures whith a plus sign that you can click on.
The css code is as follows:
/* -------------------------------------------------- */
/* Images
/* -------------------------------------------------- */
.single-image {
position: relative;
display: block;
margin-bottom: 15px;
}
.bwWrapper {
position: relative;
overflow: hidden;
display: block;
im quite lost now as i dont know if there is something that i need to change from the CSS file or not.
Thank you,
Rashed
Try it with
.BWfade{
display:none!important;
}
Should work. (tested in Firefox)
I have a page which has some data in form of tables
Currently, for one of the columns(which is a link) I need to display a text on hover and was able to do it successfully by giving the title in the tag. Now , I tried applying css to the text on hover and following is the snippet
CSS
a.changes:hover {text-decoration: none; }
a.changes p {position: absolute; left: -9999px;border-style:solid; border-color:black; border-width:1px;}
a.changes:hover p {left: 5%; background: #ffffff; size:1px;}
and in the html, I removed the title from the a tag and gave it in inside tag
<a href='#' class='changes' onclick='AAA'><font color=blue>XYZ</font><p style='width:100px;'>TextToBeDisplayedOnHover</p></a>";
The above snippet works fine on the current display. But when I scroll down the page and then try to display to text on hover by selecting the last element, then the title is not getting displayed at well. My guess the text on hover has gone beyond the display page vertically.
Someone please help me in this. I need this hover to work for all the rows in the table in the current page as well as the next pages and not just the current display alone as happens in my case
Thanks in advance.
I don't quite understand your problem but you have 100 pixels wide container so the "TextToBeDisplayedOnHover" doesn't fit into the container. You could try this (or widen the container):
a.changes:hover p {left: 5%; background: #ffffff; size:1px;width:100px;overflow:scroll;}
Lose the inline styles in the hovering ´p´. (You're using CSS already.)
<a href='#' class='changes' onclick='AAA'>XYZ<p>TextToBeDisplayedOnHover</p></a>
If you use spaces in the hovering text ("Text To Be Displayed On Hover") you'll be less likely to run out of space.
If blue isn't the the default font color, add this to your styles:
a {color:blue;}
I'm coding a site which has a big company logo at the top left.
So I code it with the logo as the background image, the company name in an H1, and hide the H1 using image-replacement techniques.
But there's no "home" link in the rest of the site's navigation. The logo is probably intended to be the "home" link. But because of the semantic/image-replacement technique, there's nothing to click.
What would you do in this situation? Position something transparent over the logo is my first thought, but I'd like to hear other suggestions.
Very simple - put an Company name inside your H1 element, and apply your image replacement styles to h1#logo a (or whatever selector you use). You'll need to add display:block; to the styles, to have the anchor behave correctly.
Let me know if you need more detail than this!
Extra detail:
OK - I usually use the following HTML and CSS for image replacement:
HTML:
<h1 id="logo">
[Company name]
</h1>
CSS
#logo a {
display:block;
width: 200px; /* Or whatever you like */
height: 0;
padding-top: 100px; /* The required height */
text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */
overflow: hidden;
background: /*whatever you like */;
}
This is a kind of 'double-strength' - the height:0/padding-top technique creates a box the size you need, but without any room for text to display (the background image will appear in the top padding, but the text won't). The big negative-text-indent is just a safety for browsers that get things wrong occasionally (old webkit used to have problems - not much of an issue nowadays).
Let me know how you go!