I have a unique homework problem. I'm trying to replicate the layout I have here.
https://ibb.co/fYh6d3m
Inserting an image and centering it is easy enough, ditto for bg colour. However I'm at a loss on how to add the arrows next to the images.
The arrows do NOT have to take you to the next image, they are literally just meant to be interactivee buttons ( ie click on right arrow go to linked in, click on left go to fb, etc ) However this DOES have to be responsive.
The catch is, we can only use HTML and CSS ( Otherwise it would be too easy via Jquery )
Can anyone please help me out here? I've been trying to figure it out for the last 4 hours.
I've pasted some rough code below (please excuse the weird margins/padding on the .left, I was seeing if I could jury rig it in, but it didn't work) and I think I'm on the right track, but I can't seem to find a way to position the arrows on either side of image.
Thank you very much for any help, I appreciate it.
Tried using images, but was told we aren't allowed as they have to be interactive
Spent a good few hours researching, but without the correct terminology, I'm at a loss.
The margin and padding is way off on the .left because I was seeing if I could jury rig it using those, but it has to be responsive as well.
.image2 {
display: block;
margin-left: auto;
margin-right: auto;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 15px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: -250px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
<section>
<img src="images/image2.jpg" class="image2">
<i class="arrow right"></i>
<i class="arrow left"></i>
</section>
I'm trying to get it to look like this
https://ibb.co/fYh6d3m
With the arrows being interactive via hover states/linking but NOT proceeding an image in a slideshow.
Related
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
I've been testing my portfolio website (http://www.meades.org/Hazel-Portfolio/) on different browsers. The website landing page is designed for an image-specific caption to fade in and obscure the original image whenever the mouse hovers over the image. It seems to work on every browser I've tested so far except for Microsoft Edge. For some reason the blue caption block gets cut off at the bottom and inserted on top of the next image and I can't figure out why.
Here's the CSS I've applied to the images to get the effect:
.index-caption {
background-color: #75bff0;
color: black;
font-size: 16px;
padding-top: 25%;
opacity: 0;
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
text-align: center;
display: inline-block;
}
.index-caption:hover {
opacity: 1;
}
And here's an example of that class style being applied to the html (I'm using the Bootstrap .card-columns class to group the images):
<div class="card">
<a href="EMP.html">
<img size="100%" height="100%" class="card-img-top" src="images/emp.png" alt="Ethnomusicology Major Project">
<div class="index-caption">
<h2>The Ideology of the Modern Concert Hall</h2>
<br>
<h4>Last updated: 5/10/19</h4>
</div>
</a>
</div>
I've done some trial and error CSS editing and think the issue might be to do with how the transform and/or display values operate in Microsoft Edge, but I'm not sure and am pretty far out of my coding depth at this point. Does anyone know why it's not working and/or have any advice on how to fix it?
I believe you have hit this bug -> https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107210
Just add overflow: hidden; to .card-columns .card to work around this.
Also, there is no need for the transform as you have width and height at 100%. You could just have:
top: 0;
left: 0;
and no transform.
How could I make a wavy, curved, footer like below?
I tried with css before:: and after::, I tried with border-right-bottom-radius, and many tricks like that.
I have this picture element:
Could I use that?
I want the Google map which is below to be with z-index: -1. What I mean is that I would like the Google map to appear in the back of the above curved line(position: absolute).
Can somebody help me to execute that footer with Google map and top curved green border in code ?
I had a client a little ways back, probably a year ago, who wanted the same thing, but without using an image. And here is the code I used. See http://jsfiddle.net/yrovnjg3/ for the action. This creates 2 "claws" (one being upside down) that looks almost like your image above. I put in some CSS at the end of the demo to help separate and show the 2 different claws, like the pink box. Just delete those last few lines and everything will look like the image above, except the color will be red and won't at an angle. Just follow the instructions below. Have fun. Hope this helps.
<!--image-->
<div id="line"></div>
<!--google map-->
/*
If you change "#line {transform: rotate(0deg);}", then you'll need to adjust: "#line:after {top: ---; left: ---;}". Usually just changing one or both down or up a number will fix rotation stacing problems.
To some degree, changing "border-radius: 50px 0px 0px 0px;" to something like "border-radius: 50px 0px 0px 0px;" will act like "transform: rotate();".
Do NOT change "#line:after {transform: rotate(180deg);}". Doing so will mess everything up.
If any of the lines marked with an "x" are changed, you'll need to change all, or most, of the ones marked with an "x"
*/
#line {position: relative; /*can be "relative" or "absolute". doesn't really matter.*/
width: 0px;
height: 0px;
/*x*/ transform: rotate(0deg);}
#line:after, #line:before {position: absolute;
content: "";
/*x*/ width: 50px; /*if this is changed, then don't forget to change "left" in ":after".*/
/*x*/ height: 50px; /*x*/
/*x*/ border-radius: 50px 0px 0px 0px; /*only have a value on the first set.*/
/*x*/ border-top: 12px solid #ff0000; /*can be any color you want.*/}
#line:before {/*just if you want to customize the first half of the shape.*/}
#line:after {/*x*/ top: -50px;
/*x*/ left: 50px;
transform: rotate(180deg); /*don't even think about changing this.*/}
/*REMOVE THESE. DEMO PURPOSES ONLY:*/
body{margin:100px;}
#line{background:pink;width:20px;height:20px;}
#line:before{border-color:blue;}
#line:after{border-color:green;}
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.
I've run in to a bit of a problem. I have a menu list where I custom made some image hover states for list items. This worked perfectly fine until I needed to change the menu items (list item text length, etc). I have to go back and re-make all of the images each time something changes.
Here are some images of what I'm trying to accomplish:
Basically the hover adds a red background and a duplicate of that red region rotated ~2 degrees and is lighter colored. Would it be possible to do this via CSS with :after and transform: rotate()? If not, what would be a nice way of accomplishing this effect for varying word lengths?
Thanks ahead of time!
Tre
This can easily be done with transform as you say. You'll need to have two elements in each button though, one for the text and one for the skewed background:
<div class="menu-button">
<div class="text">Screenings</div>
<div class="hover-bg"></div>
</div>
And style the .hover-bg class something like this:
#menu .menu-button:hover .hover-bg
{
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(220, 50, 50, 0.4);
transform: rotate(2deg) scale(1.05, 1);
transform-origin: center right;
}
Here's an example on JSFiddle
Here's an example where I had some fun with transitions. Due to lazyness I only bothered to make it work in Webkit, meaning Chrome and Webkit.
Note that for cross-browser compatibility you'll need the vendor specific property prefixes (-webkit-, -moz-, etc)
this can be done in pure CSS (not even 3).
On hover have a tilted background image, position it a few pixel to the left and top and add background color.
Because of the background color, you will see only a part of the image:
<div class="text">Screenings</div>
.text {
color: #000;
margin-left: 5px;/*to make room for the hover image */
padding: 4px;
}
.text:hover {
background: #900 url(tiltedimage.png) no-repeat -5px -5px;
color: #fff;
}
This will point you to the solution.