Creating a responsive image using Bootstrap with an SVG filter applied

I've been working on applying an SVG filter to responsive images in Bootstrap 4 by using the class "img-fluid"

However, I'm facing an issue where the separation between images varies across different resolutions. It's fine on desktop, but on mobile, the separation becomes too large.

If you want to take a look at the code snippet, you can find it here: https://codepen.io/fernandocomet/pen/ExVBrrR?editors=1100

Within my container, I have the following code:

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

Any assistance on how to maintain consistent image separation across resolutions would be greatly appreciated.

csssvgbootstrap-4responsivefluid

Answer №1

I have made adjustments to the code in order to maintain a 5% margin gap between the containers. Feel free to customize this according to your requirements.


.container {
  position: relative;
  margin: 5%;
  /*width: 100%;*/
  /*height: 100vh;*/
}


/*
.container img {
  position: absolute;
}
*/

.filtered {
  width: 100%;
  filter: url(#duotone);
  transition: opacity 1s;
}

.filtered:hover {
  opacity: 0;
}



<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <svg version="1.1" width="0" height="0" class="filter-rot">
    <filter id="duotone" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
    </filter>
  </svg>

  <div class="container px-0">
    <img src="https://www.fernandocomet.com/img/desktop/adcrackdown.png" class="img-fluid position-absolute" />
    <img src="https://www.fernandocomet.com/img/desktop/adcrackdown.png" class="img-fluid filtered" />
  </div>

  <div class="container px-0">
    <img src="https://www.fernandocomet.com/img/desktop/ifemafitur.png" class="img-fluid position-absolute" />
    <img src="https://www.fernandocomet.com/img/desktop/ifemafitur.png" class="img-fluid filtered" />
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fluidly move through spaces where subsequent elements align to the top level

In the black container, there is an {overflow:hidden;} CSS property applied The yellow blocks are ordered in code according to the numbers and have {float:left;} I am aiming for the 5th element to align with the element above it: However, currently this ...

htmlcsscss-float

CSS allows for the creation of fixed bars that remain at the top of the

I am looking to create a fixed bar that is off-center with a scrolling background. The code I have so far either places the bar on the surface but fixes it to the background, or it positions the bar beneath the image and fixes it to the window - neither ...

htmlcsscss-position

How come the mouseover effect on the div remains even after the mouse has been removed?

How can I keep the original CSS class when the mouse moves away? function highlight( x, y) { var sel=document.getElementById(y); sel.style.borderBottom= "2px solid "+x; sel.style.opacity="1"; sel.style.transition="all eas ...

javascriptcssdom-eventsjavascript-objects

Ways to create a back-and-forth transition across a sequence

Is it possible to create an animation that changes the width of an element once, then reverts back after a pause? I want this transition to occur over a three-second interval followed by a two-second delay. How can I achieve this? Below is the code I have ...

javascriptjquerycsstransition

Regular expression for selecting characters and numbers in jQuery using a selector

Can someone help me figure out how to select all IDs like this: r1 r2 r3 etc. and not the other IDs like helloWorld I attempted using the CSS selector with jQuery but I'm having trouble understanding how. I tried $('#r[0-9]') but it didn& ...

jquerycssregexselector

Disabling functionality with ng-disable is not effective when used within an SVG element

I am currently developing an angularjs directive that requires a circle element to be disabled after it has been clicked once. Although the ng-click event is functioning correctly, the ng-disable feature does not seem to be working as expected. Even though ...

angularjssvgangularjs-directiveangularjs-ng-disabled

What is the best way to create an animation for a dynamic menu background image

While hovering over a list item, I want to create an animation where the background image appears to zoom out. $(function () { var image = $('.menu').find('img').attr('src'); $('.menu ul li').mouseover(fun ...

javascripthtmlcss

Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Just starting out here. Imagine I have 4 distinct links leading to the same webpage - is there a way to modify the properties of the destination page depending on which link was clicked? For instance, clicking on link1 changes the background color of the d ...

javascripthtmlcssfrontend

User Agent Stylesheets do not take effect

https://i.sstatic.net/UXF3l.png Currently, I am working on a simple unordered list project where I am utilizing Material UI. However, there seems to be an issue that I would like some help with. (user agent) html.css The CSS includes the property padd ...

htmlcssmaterial-uiuser-agent

CSS animation using a series of linked elements

Is there a way to make my buttons animate sequentially? For example, the second button should start animating only after the first one has finished. Any assistance would be greatly appreciated! a { padding: 6px; display: block; width: 50px ...

htmlcssanimation

Adjust image size to maintain consistent dimensions

Is there a way to resize the images so they maintain the same aspect ratio? Currently, all the images are appearing distorted. https://i.sstatic.net/czpto.png Here is the HTML code for the card: <div class="container"> <div class="flex- ...

htmlcss

Using Selenium 2 to dynamically insert CSS styles into the currently visible webpage

I experimented with using jQuery on a webpage that has already been modified by jQuery in order to add custom CSS code: jQuery('head').append('<style type=\"text/css\">body { background: #000; }</style>'); When I ...

javajavascriptcssselenium-webdriver

Display concealed information upon clicking

Is there a way to reveal hidden content only after clicking on the "View" link instead of hovering over it? I have tried implementing it so that the content appears on click, but it doesn't seem to be working as expected. How can I achieve this usin ...

javascriptjqueryhtmlcss

Enhance Your Highcharts Funnel Presentation with Customized Labels

I am working on creating a guest return funnel that will display the number of guests and the percentage of prior visits for three categories of consumers: 1 Visit, 2 Visits, and 3+ Visits. $(function () { var dataEx = [ ['1 Vis ...

javascriptjqueryhtmlcsshighcharts

What is the best way to make a Dojo TitlePane overlap using CSS?

My dilemma involves a jsfiddle featuring two TitlePane widgets in the central pane's top right corner. Currently, clicking on the right TitlePane ("Switch Basemap") moves the left TitlePane ("Map Overlays") to the left. What I want is for the right Ti ...

javascripthtmlcssdojo

What is the process for adding color to the rows of a table?

Hello, I have a table with various fields that include: I am looking to assign colors to entire rows in the table based on certain criteria. For example, if the ASR value falls between 75 and 100, it should be assigned one color; for values between 50 and ...

phpcss

Achieve a perfectly centered and responsive image placement on a webpage accompanied by a countdown timer

I've been trying to design an HTML page with a countdown feature, and I want to place an image above it that is centered and responsive. Despite my efforts, I haven't been able to achieve the desired responsiveness. I envision it looking like thi ...

javascripthtmlcss

What are the steps to creating a screen that mimics a mirror in the physical world?

Is there a way for the user to see themselves when they open a URL? I'm not looking for a mirror effect like the one produced by jQuery reflection js. I don't want to rely on using the front camera or any other camera to achieve this. Any sugges ...

javascriptjqueryhtmlcssmirror

Guide to using jQuery to load an image

I am using this code to load an image and display it within a dialog box. <div id="image_preview" title="Client Photo Preview"> <p><img src="" alt="client image" id="client_image_preview" /></p> </div> $("#client_image_p ...

javascriptjqueryhtmlcss

"Utilizing lightbox JS to produce a centralized overlay across the entire webpage

Currently in the process of redesigning a gallery for a client at www.stagecraft.co.uk/gallery.html I am encountering some challenges with my overlay. I want it to be centered and on top of any divs that are currently in view, as new images from the clie ...

jquerycssoverlaylightbox