What methods can be used in CSS to create this specific design using only two images?

Question

What methods can be used in CSS to create this specific design using only two images?

Searching for a way to display two images side by side on a webpage with specific criteria.
1) Final look should resemble this:
https://i.sstatic.net/XA8V3.jpg 2) Both images must be clickable links (e.g. mysite1.html and mysite2.html)
3) Both images should be in black and white
4) One image should slightly grow and become colored when hovered over
5) Clicking on the images should redirect to mysiteX.html

I am aware that there may be templates available online for this design, however I am unsure of what to search for specifically.

EDIT
In need of a template to achieve this effect. I have not attempted it yet and prefer not to start from scratch as I believe there is an existing template that can meet these requirements.

javascript css image

Answer 1

Answer №1

Using the css property clip-path is actually quite simple. All you need is a polygon shape.

If you want to learn more about it, check out this helpful article: https://css-tricks.com/clipping-masking-css/

Here's an example demonstrating how you can use it to solve your issue: http://jsbin.com/linelegini/1/edit?html,css,js,output

Answer 2

Using the css property clip-path is actually quite simple. All you need is a polygon shape.

If you want to learn more about it, check out this helpful article: https://css-tricks.com/clipping-masking-css/

Here's an example demonstrating how you can use it to solve your issue: http://jsbin.com/linelegini/1/edit?html,css,js,output

Answer 3

Answer №2

Explore the capabilities of HTML's map and area elements. These tags prove to be valuable when discussing shape overlay effects, and with a touch of CSS and scripting magic, you can achieve an impressive visual display.

Answer 4

Explore the capabilities of HTML's map and area elements. These tags prove to be valuable when discussing shape overlay effects, and with a touch of CSS and scripting magic, you can achieve an impressive visual display.

Answer 5

Answer №3

Thanks to the assistance of Ivan, I was able to achieve my desired result. CSS is not my strong suit, so there is definitely room for improvement.

Here is the CSS code used along with Bootstrap:

.l {
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%,0% 100%);
  filter: grayscale(100%);
  position:absolute;
  z-index: 2;
}
.r {
  left: 540px;
  margin-left: -20%;
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%,0% 100%);
  filter: grayscale(100%);
  position:absolute;
  z-index: 1;
}
.d {
  position:relative
}

Below is the HTML structure used:

<body>
    <div class="d">
    <div class="col-md-12 col-md-offset-3">
      <img class="pic l" src="http://solarsystem.nasa.gov/images/galleries/618486main_earth_320.jpg" id="leftImage">
      <img class="pic r" src="http://solarsystem.nasa.gov/images/galleries/618486main_earth_320.jpg" id="rightImage">
    </div>
    </div>
</body>

Lastly, here is the JavaScript logic implemented (note that the 'canEnter' variable could be optimized further):

window.onload = function(){
    var canEnter = true;
    $('#leftImage')[0].hX2 = $('#leftImage').height() * 2;
    $('#leftImage')[0].h = $('#leftImage').height();

    // Rest of the JavaScript code for image interactions goes here...
};

Answer 6

Thanks to the assistance of Ivan, I was able to achieve my desired result. CSS is not my strong suit, so there is definitely room for improvement.

Here is the CSS code used along with Bootstrap:

.l {
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%,0% 100%);
  filter: grayscale(100%);
  position:absolute;
  z-index: 2;
}
.r {
  left: 540px;
  margin-left: -20%;
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%,0% 100%);
  filter: grayscale(100%);
  position:absolute;
  z-index: 1;
}
.d {
  position:relative
}

Below is the HTML structure used:

<body>
    <div class="d">
    <div class="col-md-12 col-md-offset-3">
      <img class="pic l" src="http://solarsystem.nasa.gov/images/galleries/618486main_earth_320.jpg" id="leftImage">
      <img class="pic r" src="http://solarsystem.nasa.gov/images/galleries/618486main_earth_320.jpg" id="rightImage">
    </div>
    </div>
</body>

Lastly, here is the JavaScript logic implemented (note that the 'canEnter' variable could be optimized further):

window.onload = function(){
    var canEnter = true;
    $('#leftImage')[0].hX2 = $('#leftImage').height() * 2;
    $('#leftImage')[0].h = $('#leftImage').height();

    // Rest of the JavaScript code for image interactions goes here...
};

What methods can be used in CSS to create this specific design using only two images?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for preventing breaks in typography

What causes React Router to render the Navigation to the <Home/> component when the userData is still available, but redirects to "/login" otherwise?

Bootstrap is having trouble with aligning flex items and preventing them from wrapping to a new row

Launch target _blank within a modal instead of a new tab

The different types of property 'cacheLocation' do not match

Steps for accessing the files uploaded in a React application

Include a quantity dropdown menu on the cart page of your Shopify store's debut theme

What is a Creative Name for a Javascript Array?

Encountering an error with $mdDialog.alert

Is it possible to retrieve information from a json file?

The JSON data structure is not being maintained

Clickable label for checkbox in Android browser is unresponsive

Does the a:hover:not() exception only apply to elements with the .active class?

Issue with bottom margin on the last flex item located at the end of the container is not being applied

Reducing image file sizes in Ionic 3

Sending data from an Ionic application to a server

Obtain the URL link from Unsplash where the picture is sourced

Is there a way to create a two-toned horizontal rule tag?

Include the array in the 'content' property of the CSS using Jquery

Adding items to the array is only effective when done within the loop