I need to create a "record store". I'm very new to CSS and HTML and hardly know anything in JAVA. This is what I need to create.
When the user hovers over one of these featured records, move that record vertically lower and make it become larger. Also, display information about that record that was not previously visible.
Any help is helpful.
Use :hover.
Regarding the information you want to display, you could put them in another div with display: none and change it to display: block on hover using something like #record:hover #content {}.
<div id="record"></div>
#record {
width: 100px;
height: 100px;
background: grey;
}
#record:hover {
position: relative;
top: 10px;
width: 110px;
height: 110px;
}
https://jsfiddle.net/y5j8rhfL/1/
Try this instead
<div class = "record" ></div>
Now the HTML is ready
.record{
/* Whatever style you've applied here is fine */
transition-duration: .5s;
}
.record:hover{
transform: translateY(15px) scale(1.5);
}
The translateY(15px) is to move it down by 15px
While the scale(1.5) is to make it appear bigger
Related
I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!
I cannot seem to get the CSS:hover working correctly.
I am trying to display a textbox that has the opacity set to 0 when you hover over "My Website". I have achieved something similar with an image but cannot get it working with just text.
I have tried a:hover and p:hover, both do not work.
<div class="site">
<p style="padding: 10px;">My Website</p>
<p id="siteText">This is my primary website where all the information you might require on me is available! This site is also a demonstration of my work; however, external reviews are available on the website!</p>
</div>
#siteText {
background-color: rgba(255,255,255,0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
opacity: 0;
transform: translate(-50%, -50%);
}
#Home a:hover + #siteText {
opacity: 1;
}
There are several fundamental issues with your markup.
You had the a element inside a p element then the siteText content. Therefore, the selector a:hover + #siteText could not work, because the a and #siteText were not immediate siblings.
In your CSS, you had #Home a:hover, where #Home was the a element. This should have been simply #Home:hover.
Some of your other styles for the #siteText (transform, position, etc) were causing it to appear off-screen, so I've removed them below to demonstrate the adjusted HTML / CSS works.
Also, I'd like to recommend that you not use ID's for things like this. Instead, think in a global fashion. That is, use a class / markup combination that is repeatable without having to keep adding more ID's to your CSS. In the example below, I changed from #siteText (ID) to a class of .tooltip - and, tweaked the CSS so that now, anytime you have an a element immediately followed by an element with the class of tooltip, you'll have a functioning hover effect.
Below is a working snippet:
.tooltip {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
opacity: 0;
}
.pad-vertical {
display: inline-block;
padding: 10px 0;
}
a:hover + .tooltip {
opacity: 1;
}
<div class="site">
<div><a class="pad-vertical" href="myWebsite.html" id="Home">My Website</a>
<p class="tooltip">This is my primary website where all the information you might require on me is available! This site is also a demonstration of my work; however, external reviews are available on the website!</p>
</div>
</div>
Update
I've added some padding to the a element. NOTE that I've done this again through a class, so that you can use the class on a elements where you may want padding like this.
My code looks like this:
<div class="hovereffect">
<img class="img-responsive" src="/some-image" alt="">
<input type="checkbox" class="img-checkbox">
</div>
.hovereffect {
width: 100%;
height: 100%;
margin-bottom: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .img-checkbox{
position: absolute;
width: 18px;
height: 18px;
top: 3px;
right: 5px;
cursor: pointer;
}
So there is the checkbox in the right upper corner over the image and would like to extend the clickable are to the whole image for a better user experience.
As you can see the checkbox has no label and I would like to achieve the goal without a label.
I tried tricks with the ::after element which kinda worked with chrome but not really with firefox and I couldn't make the clickable area responsive that is to say, extend to the whole area of the image.
Can you use Javascript/jQuery?
You can start by assigning unique id to every image you have (Ex: img1,img2,img3) and every checkbox associated to the image (Ex: img1-checkbox).Then you can use the code below:
$('#img1').click(
$('#img1-checkbox').attr('checked', true);
);
Or something like that.
This has been a problem since a very long time and you simply cannot achieve your goal with pure css. The only available ways of getting it done are ou using label or jquery/javascript or :after pseudo class.
If you want to expand the checkbox size, then try this:
.hovereffect input[type=checkbox]
{
width:100px !important; //adjust as per need
height:100px !important; //adjust as per need
}
This will increase the clickable area of the checkbox field. Working Link
But, if you want the checkbox to be transparent and show the image behind, then you will have to use label and set it's background color to transparent.
I'm waiting to see someone prove me wrong with working code.
I've seen a very cool slider that I'd like to recreate, however, I wanna try it with pure HTML and CSS first. (Original one is javascript only, but its several years old and from a quite unprofessional source.) This is just a test of concept, so there's no effort put in crossbrowser-stuff etc.
Also, I don't know how to call it so I've no idea how to google it.
The idea is to have let's say 5 pictures in a box with equal widths. On hovering one of these the non-active ones should shrink allowing the active one to be fully displayed. Here's what I tried:
#showcase {
position: relative;
width: 760px; /* 750px + 10px to prevent flickering */
height: 200px;
}
#showcase:hover > .jewelry {
width: 75px;
}
.jewelry {
width: 150px;
height: 100%;
float: left;
transition: width 1s;
}
.jewelry:hover {
width: 450px !important;
}
.jewelryOtherHovered {
width: 75px;
}
#jewelry1 {
margin-left: 5px;
background-color: red;
}
#jewelry2 {
background-color: yellow;
}
#jewelry3 {
background-color: green;
}
#jewelry4 {
background-color: blue;
}
#jewelry5 {
background-color: pink;
}
<div id="showcase">
<div id="jewelry1" class="jewelry" onMouseOver="(0)" onmouseout=""> </div>
<div id="jewelry2" class="jewelry"></div>
<div id="jewelry3" class="jewelry"></div>
<div id="jewelry4" class="jewelry"> </div>
<div id="jewelry5" class="jewelry"></div>
</div>
Needless to say, it doesn't work the way I want it to. Try hovering the yellow block and when its half done go to the green one. That results in a wrong overall width. (Pink one doesn't remain to be stuck on the right side, hope you get what I mean.) Then hover from the red one very fast to the yellow one and then go out of the box at the bottom. In that case this is were the pink one is shown.
Question being, does anyone know how to fix it or does anyone have a better approach? Thanks for your help :-)
What are your reasons for avoiding javascript/jQuery?
From what I understand you want the following:
when none are active: the width to be each 20%
when one is active:
-the active: say 60%
-the others: 10% each
-total: 100%
http://jsfiddle.net/messedUP90/ahmdo124/
I just edited the values. There appears to be a few lines that not necessary that you could cut out.
Here is my fiddle: http://jsfiddle.net/olexander/7hB8C/
I have an anchor, which is styled as a button (the styles are simplified to show the issue).
HTML:
Button
CSS:
.button {
border: none;
outline: none;
text-decoration: none;
display: inline-block;
}
.button:active {
transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.8, 0.8);
-o-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
}
.demo {
padding: 40px;
margin: 20px;
font-size: 5em;
color: black;
background-color: lightgray;
}
The issue is that there is a non-clickable area inside the link-button.
I can explain it that there is a text node inside the anchor, and when mousedown goes to the text node, after transform, mouseup comes outside the text node. That's why mouseclick is not processed.
If we select the text node inside the anchor, it can be visualized like this (before and after mousedown):
I would like to notice, that the issue is reproduced at least in Chrome, Opera and Safari, and even if I put a link to href tag instead of handling click event. It is also reproduced with <button>, and not the issue for <input type="button">, because the first one uses content, and the second value.
Does anyone have ideas about better ways to avoid or workaround this behavior? Thanks in advance!
UPDATE:
I found a solution using a streched "stub" <span> to override the clickable area:
<span class="stub"></span>Button
and the stub styles:
.button > span.stub {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
This version is published here: http://jsfiddle.net/olexander/7hB8C/20/
The stub can be added dynamically by javascript, but the idea remains the same.
Since the inline span element can be nested inside anchors and buttons, it doesn't break the W3C HTML5/XHTML5 rules.
And Aequanox made the solution perfect! Look at the answer below.
The whole story is published here: Animated anchor and button with css3
You could avoid inserting the tag, thus mantaining the markup cleaner, by inserting this in the css:
.button:before{
content:'';
position:absolute;
top:0; left:0; right:0; bottom:0;
}
The text will not be selectable though
It seems the :active transition is replacing the click event. I'd consider this a browser bug.
Here I've changed :active to a class name .active and apply is in your event handler:
$('#linkbutton').click(function(){
$(this).addClass('active');
$(this).delay(200).queue(function() { $(this).removeClass('active');})
$('#logContainer').append('<span>clicked </span>');
});
For some reason this didn't work until I changed .button from:
display: inline-block;
to:
float: left;
Go figure... It works now though.