The idea is to have normal text until someone mouses over, then I want a shape (which ideally I would import out of Illustrator as an .svg). So when someone mouses over "CLICK HERE" a shape would appear instead of just a color or opacity change.
Can this be done using HTML and CSS?
You could play around with something like this:
.foo{
width: 200px;
background-color: blue;
color: white;
transition: background-color 1s ease;
}
.foo:hover{
text-indent: -9999px;
background-color: red;
height: 200px;
border-radius: 50%;
}
<div class="foo">
click here
</div>
If you need further help just post more details of what you want.
Related
I'm trying to get a square div that says "read more" when hovering over a circle div with a picture inside it. Been trying different things and haven't found a working solution on google.
HTML
<div class = "portfolio" id = "first"> <!-- makes the circle -->
<a href = "cake-page.html">
<div class = "readm"> Read more </a> </div>
<img src = "cake.jpg" />
<p> The cake </p> </div>
CSS
.portfolio {
/* the circles on the portfolio-page */
position: relative;
border-radius: 100%;
display: inline-block;
height: 150px;
width: 150px;
border: 2px solid purple;
}
.portfolio.img {
opacity: 1;
transition: 1s ease;
background-size: 90px 0px;
overflow: hidden;
border-radius: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
width: 150px;
height: 150px;
}
.portfolio:hover {
/* hover effect on portfolio circles */
opacity: 0.6;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 1 ease;
visibility: visible;
}
So either the text pushed the image down or it stays in the top of the circle and I can't get it to hover together with the other hover effect. I want the "read more" to pop-up in a rectangular div when hovering over together with the other hover effect.
I did not include the div class "readm" since I can't get it to work. FYI I'm pretty new to this. Thanks.
A little tough without a working example and it'd be good to see the readm css since we need to see what isn't working. That said, have you tried something like this:
.readm {
opacity:0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.portfolio:hover .readm {
opacity:1;
}
Also I would place the start of that a tag inside the readm div.
First, you need to fix your markup.
You are closing the anchor ("a") tag before closing a DIV. That alone will make your CSS fail.
I presume you want to close the DIV like so:
<div class="readm">Read more</div>
I have a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.
This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/
This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.
Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
color: white;
text-shadow: 0 1px black;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
<div class="dark">Some text</div>
<div class="light">Some text</div>
Or you can ever merge our two approaches.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
span {
color: white;
text-shadow: 0 1px black;
background: #333;
background: rgba(0, 0, 0, 0.18);
padding: 4px 8px;
}
<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>
The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.
It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.
I would put the image(s) in a div with a dark background, then lower the opacity of the images themselves, darkening the images so you can read the text. This way you can also darken the image on hover for better readability.
http://jsfiddle.net/3w34k1ea/
.img-wrapper{
width: 100%;
height: 100%;
background: #000;
}
img {
width: 100%
height: 100%;
opacity: .5;
}
img:hover{
opacity: .3;
}
p {
color: white;
position: absolute;
top: 15px;
left: 15px;
font-size: 20px;
}
I would use text shadow in your position but insteed of one I would experiment with multiples shaodws till reaching the best solution. For example:
text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1);
FIDDLE
The easiest way and best result at the same time is simply using a semi-transparent overlay, e.g.: https://jsfiddle.net/zmpwunr7
<div class="box">
<div class="overlay top">
text
</div>
<img ... />
</div>
.box {
position: relative;
}
.box .overlay {
background-color: rgba(0, 0, 0, 0.50);
color: rgb(255, 255, 255);
position: absolute;
}
.box .overlay.top {
top: 0px;
}
Put the text inside a <span> tag and give it a class, then in your CSS file:
span.your-class {
background:rgba(255,255,255,0.5);
padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}
This will put the text inside a semi-transparent box ontop of the image.
Experiment with your text colour, and the background colour until you're happy.
Here's an example: http://jsfiddle.net/9svp8qoh/
There are some answers here that will help you make the text more readable. But they do not darken the background images which is what you asked for. You could achieve this by using css filters, e.g. the brightness filter:
img {
filter: brightness(20%);
}
A value of 0 means a completely black image, a higher value will bring you a brighter result. Example: http://codepen.io/anon/pen/OPqRJK
Attention: only Firefox supports at the moment the unprefixed version, IE has no filter support. See http://caniuse.com/#feat=css-filters
If you need to support these browser, have a look at the answer from BenSlight. It's basically the same solution.
For further reading: there's a nice article on css-tricks.com explaining all possibilities we have with css filters: https://css-tricks.com/almanac/properties/f/filter/
I had this scenario once. I compromised creating span with opacity 0.5 and giving dark background, and then placing the text. If I understood you question correctly this could be a solution for you.
You can add opacity only to background:
rgba(255,0,0,0.5)
Check this post
you can use background property of css where in you can give color and image path
eg :-
background:#FFFFFF url("image path");
This will add background color to image.
I've a html formular in a part of a website, which only specific administration users can access. In this form, you can upload csv files. As only a small group of users can do this, the functionality is more important than the styling. So I decided not to do the usual trick overlaying a div over the field. I just want to archive one thing: The text in the field should look the in Chrome the same as in FF (vertical and horizontal centered text).
Here you can see the both renderings:
FF: http://i.stack.imgur.com/wbHhG.png
Chrome: http://i.stack.imgur.com/1BFHu.png
HTML-Code:
<input type="file" class="button blue full-width" name="csv_file" id="csv_file">
CSS-Styles:
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 10%;
background-image: url("../images/item-hover-button-addtocart-normal.png");
border: medium none;
margin-bottom: 10px;
background-color: #fff;
text-align: center;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
You can fix one of the issues by adding this css:
input[type=file]::-webkit-file-upload-button {
margin: 1px 0;
height: 48px;
}
This makes the button take up more height like in FF and also makes the text vertically centered..
Not so sure how to horizontally center it though, maybe someone else might know a trick.
A jsfiddle to show it working: http://jsfiddle.net/bcwk8qvt/
[edit]
You can make it centered horizontally by adding most of your original CSS to a div wrapped around the input field like this:
http://jsfiddle.net/bcwk8qvt/3/
You still need to keep some of the css on the input field too though for FF to show it the same way.
Dear Stackoverflow readers,
Using only CSS3, is there any way to change the text of a div after the transition is completed?
My code snippet can be viewed here:
HTML
<div class="biography">
<p>Hover For Player Info</p>
</div>
CSS3
.biography {
width: 100px;
height: 60px;
float: left;
margin: 5px;
background: #3399FF;
color: #ffffff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
position: relative;
right: 5%;
font-weight: bold;
font-size: 15px;
text-align: center;
padding: 10px;
border-radius: 5px;
opacity: 0.4;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
}
.biography:hover {
width: 350px;
height: 450px;
margin: 10px 10px 0px -200px;
opacity: 1;
background: #7C7C7C;
}
JSFiddle
After the transition, I want to change "Hover For Player Info" to "Player Info".
Continuing on that, I need it to change back to "Hover For Player Info" once the mouse is no longer hovering over the div.
If there's no possible way, what skills do I need to learn to achieving what I want?
Thanks in advance!
Using jQuery:
$('.biography').hover(function(e) {
$(this).html('Player Info');
}, function(e) {
$(this).html("Hover for Player Info");
});
JSFiddle Demo
This can be done in CSS alone using :after:
.biography:after{
content:'Hover for player info';
}
.biography:hover:after{
content:'Player Info';
}
On .biograhpy hover, the content changes, and no JS is required!
JSFiddle Demo
#Tony Hello again. :) I hope your project is going well.
#Faiz has given you a good solution, but it changes the text on hover, not when the animation is complete (as you asked for in your original question). If his solution works for you, awesome; if you still want the text to change when the transition is complete, here's the code for that below and here's a working jsFiddle based off the one Faiz gave above.
$('.biography').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
if ($(e.target).css('opacity') == 1) { // or any other style from the "hover" form
$(".player-info-msg").html('Player Info');
} else {
$(".player-info-msg").html('Hover for Player Info');
}
});
Let me know if you have any problems if you decide to implement this, and let me know if you have any further questions.
EDIT: If you want to read up more on this event, see the Mozilla docs. If you want to know more about jQuery, Javascript, etc. all of the resources #Faiz gave you are great.
Using the onTransitionEnd event helps a lot
Transition and animation have events event attached to dem
Here is the site I'm working on: revistapuerto
It's a Wordpress based site. What I'm trying to achieve through CSS, is to get the excerpt to appear over the picture when you hover over the Title of the post. Right now, the excerpt appears when you hover over the picture only. Want to keep that effect, and add the Title thing.
The picture - excerpt effect I got it from another user here, and here is the CSS in case it helps:
#magia {
position: relative;
}
#magia img {
display: block;
}
#magia .cornerLink {
width:494px;
height:330px;
opacity: 0;
position: absolute;
top: 32px;
left: 0px;
right: 0px;
padding: 0px 0px;
background-color: rgba(0,0,0,0.50);
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#magia:hover .cornerLink {
opacity: 1.0;
}
Thanks!
Honestly the question isn't very clear, you're gonna need to give more information. All I can really offer in regards to what you've asked is basic fiddle: http://jsfiddle.net/MBLZx/
HTML:
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
CSS:
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
(also the website won't load for me, could just be my work computer!)
that shows how to use hidden divs to make divs appear using a hover.
More information and I might be able to help you out :)
If I understood what you want, here's how you can achieve it.
#div-for-hover:hover #Div-you-want-to-show {
display: block;
}
The method is simple: The block of CSS code simply says when you hover of #div-for-hover, I'll show #Div-you-want-to-show
Note: The hover could be on a headings, DIVs, images, and more.