resizing images using html/css

I am encountering an issue with an image as shown below:

div.sliderimg {
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 5000ms linear 0s;
  transform: scale(1.05, 1.05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="sliderimg" style="background-image: url('http://images.unsplash.com/photo-1419064642531-e575728395f2?crop=entropy&fit=crop&fm=jpg&h=800&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2400')">
  <div class="carousel-caption">
    <small>FEATURED ARTICLE</small>
  </div>
</div>

I have tried to run it but encountered issues. Can you please help me resolve this problem?

demo

htmlcss

Answer №1

Do transitions happen automatically when the document loads? Instead, consider utilizing animations like so:

@keyframes slideIn {
  from {transform: scale(1, 1)}
  to {transform: scale(1.05, 1.05)}
}

div.imageSlide {
  animation-name: slideIn;
  animation-duration: 4s;
  animation-fill-mode: both;
}

Answer №2

After successfully linking jQuery to your document, you have the ability to apply a class onload. Utilizing the transition CSS property will allow for smooth visual effects.

For a more effective approach, consider using background-size instead of transform:

$(document).ready(function() {
  $(".sliderimg").addClass("loaded");
});
div.sliderimg {
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 5000ms linear 1s;
  background-size: 100% auto;
  position: relative;
}

div.loaded {
  background-size: 105% auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="sliderimg" style="background-image: url('http://images.unsplash.com/photo-1419064642531-e575728395f2?crop=entropy&fit=crop&fm=jpg&h=800&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2400')">
  <div class="carousel-caption">
    <small>FEATURED ARTICLE</small>
  </div>
</div>

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

I am looking to dynamically generate HTML elements using AngularJS based on data from a JSON file

Although there are existing answers to this question, I have a specific approach that I need help with. I've already made progress but could use some guidance. This is my Controller : angular.module('dynamicForm.home-ctrl',[]) .con ...

javascriptjqueryhtmlangularjsjson

If the text width of a label exceeds the total width of its container, intelligently display a sub-string based on pixel calculations

I am looking to shorten the text inside a label if its width exceeds the total width of its container. Instead of displaying the full text, I want to display a sub-string of it. if (SensorType.Text.Length >= 25) { SensorType.Text = SensorType.Text ...

c#htmlcss

Removing the dollar sign and retaining only the numerical values in an array using JavaScript

Using the code snippet below, I am attempting to retrieve elements by their class name in JavaScript and save them in an array. This is the current output I receive: "I received this output from the initial prices array $30.00, $20.00, $40.00" My inquiry ...

javascripthtml

hiding an "input type="file" element by using a button to conceal it

Is it possible to create a button that triggers file upload functionality? I couldn't find any solutions on Google. I've heard it can be done with labels, but I specifically need to use a button for better UX/UI. <button style="position:fixe ...

jqueryhtmlcssbuttoninput

combine two columns into a single responsive list group item

Using Bootstrap 4, I created an item list and divided it into two columns (see image). However, when I resized the website to a mobile size screen, it displayed like this: https://i.sstatic.net/0iPHm.png My desired outcome is for the list to display in o ...

csshtmlbootstrap-4css-grid

Extracting the content attribute from this code using BeautifulSoup: How can I achieve this?

I am struggling to extract the "content" attribute from the following HTML code: <meta name="description" content="Definition: What is a leadership performer?"/> My aim is to scrape "Definition: What is a leadership performer?" f ...

htmlbeautifulsouppython-requeststags

Is it possible to define a multiplication margin using css?

I am trying to place a box in the center of a container, but I am unable to set a static height for the parent element as it may change. This is causing issues with aligning the box perfectly in the middle of the page. Any assistance would be greatly app ...

htmlcssangularsasscalc

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

htmlcss

What are the reasons for my HTML page not appearing on the local host within Google App Engine?

Below is the main.py file along with the html file intended to be rendered by the Jinja2 template being utilized: main.py import os import webapp2 import jinja2 from google.appengine.ext import db template_dir = os.path.join(os.path.dirname(__file__), & ...

pythonhtmldjangogoogle-app-engine

Sliding Navigation Panel

Currently, I am attempting to implement a sidebar push navigation that mimics the one showcased here. My HTML structure includes content within a center element div. The code snippet is as follows: <div id="mySidenav" class="sidenav"> <a href="j ...

css

What is the best way to display rows in alternating red and green colors?

Currently, I am implementing the react table in my React project. I found valuable resources on how to use it at these links: https://github.com/tannerlinsley/react-table/tree/v6#codesandbox-examples and also here: https://www.npmjs.com/package/react-tab ...

cssreactjsreact-table

Flex-wrap functionality in versions of Safari 6 and earlier

As I work on developing my website, I have been using flexbox to assist with the layout. It has been functioning well on most browsers, but I have encountered issues with Safari versions below 6.1. Specifically, I am struggling with flex-wrap as I want the ...

htmlioscsssafariflexbox

Ensure the server is reachable

I have been developing a web tool using PHP, HTML, and MySQL. I am looking for a way to periodically check the server's reachability. Currently, I am using a simple query sent through a JQuery-Ajax function to display an OK message if successful or an ...

javascriptjqueryhtmlmysqlajax

What is the best way to compare two CSS files and selectively replicate just the discrepancies?

Is there a way to compare and copy different information from CSS files into another file? For instance, if I have two CSS files named a.css and b.css, is there a method to automatically select and copy only the differences between the two files? Thank y ...

htmlcssfileweb

Deciphering the principles of Bootstrap

I'm looking to understand more about what Bootstrap is. I know it's commonly used for styling web pages, but could you provide me with a clear explanation? Can big companies like Twitter, Facebook, or YouTube utilize Bootstrap for their platforms ...

htmlcsstwitter-bootstrap

Creating rounded buttons with Font Awesome icons and hover effects

I am currently working on creating buttons similar to the design shown in the image below. https://i.sstatic.net/hMqHs.png I have utilized stacked Font Awesome icons to place the icons atop a circle, resulting in this look: https://i.sstatic.net/rtEkP.p ...

htmlcsstwitter-bootstrap-3font-awesome

Optimize your texture loading process by dynamically swapping out low resolution textures with high resolution ones to enhance overall visual quality

In my current ThreeJS project, I have encountered an issue when trying to swap one texture with another. The problem arises when the UV's become completely distorted after the texture switch. Below is the snippet of code that showcases how I am attemp ...

javascripthtmlthree.jsgltf

Certain javascript files have had illegal characters mistakenly added to them

There seems to be an issue with the js files or server on certain pages, as they are not loading in Firefox: with firefox: SyntaxError: illegal character 癡爠浥湵楤猠㵛≶敲瑩捡汭敮產崻 ⽅湴敲⁩搨猩映啌敮畳Ⱐ獥灡牡瑥 ...

javajavascripthtmltomcatstruts2

Chrome and Firefox browsers are not supporting HTML simple anchor links

Creating a portfolio page at this link (http://198.96.94.51/v2/) and encountering an issue with the navigationMenu. When rapidly clicking on the links on the side, they do not redirect to the correct anchor point (some don't move the page at all). I h ...

htmlcssanchor

The ion-content scrolling directive is failing to show any displayed information

Within my Ionic application, I have a very simple HTML structure: <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> ...

cssangularjsionic-framework