I've built a site with TYPO3 (4.7.2) which has a nice graphical menu on the right hand side (see here). But this is not so user-friendly nor is it easy to maintain, as it is a bit of a hack and doesn't use "Typo3-Standards", but just some general HTML/CSS-hacking:
the menu's html is:
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="/fileadmin/images/baehr_katalog2.png" />
</a>
</p>
and the corresponding CSS:
#kat a {
background: url("/fileadmin/images/baehr_katalog2_hover.png") no-repeat;
display:block; height:120px; width:220px; /* Linkbereich begrenzen */
}
#kat img {
display:block; width:220px; height:120px; border:0;
}
#kat a:hover img {
visibility: hidden;
}
So basically I show the image with white font in "standard mode" and when the mouse hovers, that image is hidden and the same image (with black font) in the background becomes visible. I thought this was quite nice, and it did not need any JS :-)
But I'm wondering if there is a way to do this more elegant, robust and user-friendly (perhaps with TYPO's tools?), so that the user could change images if needed without having to worry about CSS...
edit: I found a solution requiring one image! (Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
But still I wonder if there's not a more TYPO-esque solution around? ;-)
If you don't use text links (only image) you are able to switch properties like this:
#kat a {
text-decoration: none;
display: block;
width: 220px;
}
#kat a img {
border: 0;
max-width: 100%;
height: auto;
display: block;
opacity: .5;
}
#kat a:hover img {
opacity: 1;
transition: opacity 1s ease 0s;
}
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="http://lorempixel.com/440/220"/>
</a>
</p>
As edited in the q, I found a solution:
Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
(In order to avoid issues created by non-CI fonts and to maintain good looks etc., I prefer captions as part of img vs. CSS-styled text.)
Related
I want to show first character of a word using ::first-letter css property,
I have set up following code pen example but is not working for me not sure if i made any mistake.
<div class="slide">
<a target="_blank" href="#" class="post-badge btn_six">TECHNOLOGY</a>
</div>
CSS
.post-badge {visibility: hiddenx; font-size:50px; display: inline-block;}
.post-badge::first-letter {visibility:visible; display:block;}
a{color:red;}
.slide{
height:50px;
width:100%;
background-color:#f5f5f5;
}
.btn_six:hover{visibility: visible; color:green;display:inline-block; }
I have delibrate made .post-badge {visibility: hiddenx; with x at end otherwise it is not showing anyting.
How can i fix this so that it only show T and when i hover over it then it show full the word TECHNOLOGY
https://codepen.io/anon/pen/rpPKvJ
According to MDN, and this w3C wiki the first-letter pseudo element only supports a subset of CSS properties. (from the wiki:)
The following properties that apply to ::first-letter pseudo-elements:
font properties
‘text-decoration’
‘text-transform’
‘letter-spacing’
‘word-spacing’
‘line-height’
‘float’
‘vertical-align’ (only if ‘float’ is ‘none’)
margin properties
padding properties
border properties
color property
background properties
The visibility property doesn't appear in that list.
According to this, Firefox seems to be according to spec and not Chrome.
As a workaround, consider using Nenad's solution.
Instead of changing visibility you could change font-size on hover.
.post-badge {
font-size: 0;
display: inline-block;
color: red;
text-decoration: none;
transition: font-size 0.3s ease-in;
line-height: 1;
}
.post-badge::first-letter {
font-size: 50px;
}
.slide {
height: 50px;
width: 100%;
background-color: #f5f5f5;
}
.btn_six:hover {
visibility: visible;
font-size: 50px;
color: green;
}
<div class="slide">
<a target="_blank" href="#" class="post-badge btn_six">TECHNOLOGY</a>
</div>
I'm currently working on the feature in which whenever a user hovers over a link, instant preview is shown below the link. Like this -
What I wanted to do is, whenever a user hovers over a link, iframe should shift towards right, just like in Google Instant preview.
<div class="title" (mouseover)="overTitle()" (mouseleave)="overTitle()">
{{item.title}}
<div class="box">
<iframe width="400px" height="400px" [src]="myUrlList[i]"></iframe>
</div>
</div>
CSS file -
.box {
display: none;
width: 100%;
}
a:hover + .box, .box:hover{
display:block;
position: absolute;
z-index:100;
}
I tried using align="right" in div tag, but nothing happens. Also in .box class in CSS, I tried using float: right;, but nothing happens. It will be very much helpful if someone can help me. :)
Check something like that, without JS, pure CSS.
https://jsfiddle.net/fxdhcrxj/2/
I just use opacity and visibilityto animate fade in and out, you can use any other methods, like JS fade In out etc.
In CSS if you want catch next element use ~
CSS:
.title{
// for proper position absolute element inside
position: relative;
}
// We catch nexy element .box, and when some one hover over box
.title a:hover ~.box, .title .box:hover{
//display: inline;
visibility: visible;
opacity: 1;
}
// As i use element to bottom 0, I must translated it 100% below of his height.
.title .box{
//display: none;
visibility: hidden;
opacity: 0;
transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
position: absolute;
z-index: 10;
background: #fff;
bottom:0;
left:0;
transform: translateY(100%);
}
HTML:
<div class="title" >
TITL0E
<div class="box">
<iframe width="400px" height="400px" src="https://www.w3schools.com"></iframe>
</div>
</div>
Important Note:
If you want put lot of Iframes, on page use Lazy load on them.
Simply just replace src attr when someone hover over title or use scripts e.g
http://dinbror.dk/blog/blazy/ otherwise your page will load really slow and make lot of freezes etc.
For better mobile support you may also use focus on element, not only hover
Here you go: http://codepen.io/ruchiccio/pen/vxVoKd
a:hover + .box, .box:hover {
display:block;
position: absolute;
right:0;
top:0;
z-index:100;
}
You need to have right:0; set for the box. Also, your .box was set for a 100% width which is why the iframe didn't know where to go. You have to options: Either set the box width to 400px, which is the same as the iframe (which is what I did in my codepen):
.box {
display: none;
width: 400px;
}
OR you may leave the 100% width but then add text-align:right; to the .box class. Both work.
.box {
display: none;
width: 100%;
text-align: right;
}
Ok, so I am attempting to make a button but instead of using a fill color and changing the color on :hover I want to use an image as the background and change its opacity on :hover.
Here is a jsfiddle to sort of see what I am trying to do. The first button is the template im going off of, but its too boring for my taste.
I can create a button with the image as the background but when I set and change the opacity it obviously changes this for all child elements and I need the text to be unaffected. I also need it to be response with a 100% width so that it can resize with a containing grid on my website.
I have tried to create a container div that I placed the link text and an img src and tried to do position:absolute and position/relative but this breaks the container div. Im sure I am just overlooking something simple and have just been thinking about it for too long.
Essentially, I am having trouble stacking multiple elements in container div so I can target the :hover for the image and nothing else.
Any help is appreciated!!
UPDATE:
I figured out how to get what I was wanting, as seen here: http://jsfiddle.net/6EMNM/
HTML
<div class="cma-button-wrapper">
<a href="#"><div class="cma-button-header">Header Text</div>
<div class="cma-button">
<img src="http://breadedcat.com/wp-content/uploads/2012/02/cat-breading-tutorial-004.jpg" />
<p class="title">Bread Cat!</p></a>
</div></div>
CSS
.cma-button-wrapper {
width:250px;
}
.cma-button-wrapper img:hover {
opacity:.6;
}
.cma-button-wrapper a{
text-decoration:none;
}
.cma-button a{
/* force the div to properly contain the floated images: */
position: relative;
float: left;
clear: none;
overflow: hidden;
}
.cma-button img {
position: relative;
width:100%;
height: auto;
z-index: 1;
opacity: .2;
}
/*.cma-button img:hover {
opacity: .3;
}*/
.cma-button .title {
font-size:1.9em;
font-family: Helvetica, sans-serif;
font-weight: lighter;
display: block;
position: absolute;
width: 100%;
top:10%;
left: 0;
z-index: 2;
text-align: center;
}
.cma-button a {
color:#000;
}
.cma-button-header {
font-family: Helvetica, sans-serif;
font-weight: light;
font-size:.9em;
padding:.4em;
color:#FFF;
background-color:#FF7300;
}
This is close but how do I make it so that when you mouse over any child element of .cma-button-wrapper the img changes opacity but nothing else. Is this possible with pure CSS or do I need javascript? Thanks!
You have 2 ways and it will work with every browser:
.button-image:hover {
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
Or you can create 2 images in photoshop. One "button_image.png" And one "button_image_hover.png" with transparency you want. Should be PNG.
Have a nice day!
I am looking for the easiest, most maintainable way to do this:
These are text slugs that will be appended to certain images throughout the site. They all say this same thing, but the images are varied and come from a CMS.
I know how I would do it with the image set to position relative and a div with "there's a better way" in an absolutely positioned child div.
However, since that requires HTML added to every image that gets this treatment, I was looking for a way to do this with a css class using the :before pseudo element. So far, applying the class to a wrapping link has no effect:
<img src="imagepath" alt="">
.tabw img:before {
content: 'theres a better way';
color: red;
font-size: 18px;
}
Is this sort of thing possible? Having the whole thing in CSS means all I have to do is have the CMS apply the class attribute when needed.
Yeah, ::before and ::after don't work on images. But you can apply them to the wrapper
link:
a{
position: relative;
}
a, a > img{
display:inline-block;
}
a::before{
content: 'theres a better way';
position: absolute;
left: 0;
top: 0;
width: 80%;
height: 20px;
left: 10%;
background: #000;
opacity: 0.4;
color: red;
font-size: 18px;
}
demo
If you want the text added in the HTML, you'll have to put a real element with it in your link (and apply the same rules to it, but without content)
I'll do it like this with jQuery :
Html
<div class="thumb">
<img src="http://www.zupmage.eu/up/NvBtxn7LHl.png" alt="cover"/>
<div class="caption">My caption</div>
</div>
Css
.thumb {
position:relative;
width:230px;
height:230px;
}
.thumb img {
max-width:100%;
}
.thumb .caption {
display:none;
position:absolute;
top:0;
height:20px;
line-height:20px;
width:100%;
text-align:center;
background:rgba(255,255,255,0.5);
}
JQuery
$('.thumb').hover(function() {
$(this).find('.caption').fadeIn();
}, function() {
$(this).find('.caption').hide();
});
See fiddle
NOTE TO ANYONE FINDING THIS THREAD: In Firefox 21 and IE 9/10 this did not work right with oversized images. It forced the images to 100% even if globally set to max-width: 100%
I had to follow the answer I selected above but set the A tag to display:block instead of display:inline-block to fix.
I have some links to my facebook and twitter, these links are images. I want these links to turn lighter when I hover over them. I was thinking I could do this by making two images and making the images change when I hover over the image link. Is this the best way to do it and if it is how do i do it? I couldn't find any help on how to do it this way.
Here is my HTML:
<div class="social">
<a href="https://www.facebook.com/seth.urquhart?sk=wall&v=wall">
<img src="../img/facebook_logo_extended.jpg"/>
</a>
</div>
<br>
<div class="social">
<a href="https://twitter.com/SethUrquhart">
<img src="../img/twitter_logo_extended.jpg"/>
</a>
</div>
Here is my CSS:
p {
color: #232323;
text-indent:0px;
margin-left:30px;
padding-right: 30px;
}
ul {
text-align: center;
color: gray;
}
ul a {
text-decoration: none;
color: black;
}
ul a:hover {
text-decoration: underline;
margin-right: auto;
margin-left: auto;
}
html {
background: #e8e9e1;
}
h1 {
text-align: center;
}
body {
font-family: sans-serif;
color: #232323;
}
.wrap {
min-width: 600px;
width: 1200px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.content {
background: #ffffff;
width: 900px;
margin-left: auto;
margin-right:auto;
height: auto;
text-indent: 50px;
}
.footer {
text-align: center;
background-color: #383838;
width: 900px;
margin-left: auto;
margin-right: auto;
color: #e8e9e1;
}
.social {
width: 900px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.social:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
ul#list-nav {
padding: 0;
list-style: none;
width: 605px;
margin: 0 auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
Assuming you're willing to use CSS3, I created an example showing one way to get a brief widening effect for the icons (I suppose that is what "dense" means in the question). Reduced code here:
.icon {
-webkit-transition: 0.25s;
transition: 0.25s;
}
.icon:hover {
position: relative;
z-index: 1;
transform: scale(1.7);
-ms-transform: scale(1.7); /* IE 9 */
-webkit-transform: scale(1.7); /* Safari and Chrome */
}
The transform property has good support. The effect with transition isn't so well supported (no IE9 support), but if you are thinking on graceful degration, I think it's quite valid to use that.
EDIT
I'm updating this answer because it could help other people in future. The accepted answer isn't the right approach, since it's using obtrusive JavaScript to do things about styling, where CSS is the right tool. I really hope the OP will take a look here and change their code.
Based on the OP's feedback, I updated the example showing how to get a brightness effect simulated by changing the opacity property with a fallback using filter for IE6-8. In short, here's the code:
.icon {
opacity: 1;
filter: Alpha(Opacity=100);
}
.icon:hover {
opacity: .6;
filter: Alpha(Opacity=60);
}
It's easy and works very well when the parent's background-color is lighter than the element. If you need something more elaborated (if you really want changing between two images), I really suggests you to use CSS sprites.
I don't know what you mean by dense, but you can alter any image property via the onmouseover and restore it with onmouseout. Here's a code snippet to show how to do it. This code simply makes an image dimmer when the mouse is over it, then restores it when the mouse leaves:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.opacity=0.5"
onmouseout = "document.getElementById('test').style.opacity=1" />
If you wanted to make the images bigger on the hover, you'd change any of the size attributes. For instance, here's a particularly dramatic size jump:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.width='75%'"
onmouseout = "document.getElementById('test').style.width='50%'" />
Please note that the above is for illustrative purposes only. There are other ways of doing this, and I am not saying the way I presented is the best or even a good one. However, it's clear and I just want you to clearly see how this can be done.
The simpliest solution would probably for you to use background-images rather than images so you can just switch between them. You can even go as far as creating 3 states this way.. inactive, hover, and selected..
Consider cascades and specificity.. If you define your inactive state first, hover state is defined second overwriting the same definitions, selected state is defined last, again with the same definitions and level of specificity. Now each will overwrite the other in the appropriate or they will happen.
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }